在JavaScript中复制部分CSS灰度过滤器？ [英] Replicate the partial CSS Grayscale filter in JavaScript?

问题描述

我可以轻松地将图像转换为完全灰度版本。我不能做的是复制部分灰度。例如，

I can convert an image to fully grayscale version easily. What I can't do is replicate partial grayscaling. For example,

.image {
  filter: grayscale(0.5);
}

在CSS中应用的此滤镜仅会将图像部分灰度化。我想在画布图像上的JavaScript中做同样的事情。有人可以帮我吗？

This filter applied in CSS will only turn the image partially grayscale. I want to do the same in JavaScript on a canvas image. Can anyone please help me with that?

我知道如何使图像完全灰度。我正在寻找一种方法来减少效果，我希望使用JavaScript画布。

上面的所有图像都使用了不同强度的灰度滤镜。

All the images above have the grayscale filter applied with different intensities.

推荐答案

使用ctx.globalCompositeOperation =saturation

Use the ctx.globalCompositeOperation = "saturation"

ctx.drawImage(colourImage,0,0); // draw colour image onto canvas
ctx.globalCompositeOperation = "saturation"; // set the comp mode
ctx.fillStyle = "hsl(0," + Math.floor(amount) + "%,50%); // set a colour with saturation 0-100

// OR use RGB for finer control
ctx.fillStyle = "#FFF"; // white no colour
ctx.globalAlpha = amount; // the amount of saturation you wish to remove 0-1

ctx.fillRect(0,0,colourImage.width,colourImage.height);

通过使用globalCompositeOperation类型source-over，更轻，更暗，source-atop，source-in，source-out，destination-over，可以创建许多效果，目的地之上，目的地的，目的地出，复制，XOR，乘，屏幕，叠加，颜色减淡，颜色烧伤，硬轻软，轻，差别，排斥，色调，饱和度，颜色，光度

There are many effect that can be created by using the globalCompositeOperation types "source-over,lighter,darker,source-atop,source-in,source-out,destination-over,destination-atop,destination-in,destination-out,copy,xor,multiply,screen,overlay,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity"

并非所有浏览器都支持所有操作（最值得注意的是FF不支持较暗使用相乘但是chrome，Edge和Firefox支持上面列出的所有其他内容。

Not all browsers support all operation (Most notable is FF not supporting darker use multiply instead) But chrome, Edge, and Firefox support all the others listed above.

更多关于saturati如下所示，两种方法都可以非常精细地控制效果量

More on saturation and Colour to Black and white][2] below, both methods give very fine control over the amount of the effect

增加饱和度的颜色对比度

使用

ctx.globalCompositeOperation = 'saturation';

可以使用Alpha设置或填充叠加层中的饱和度来控制效果量

The amount of the effect can be controled with the alpha setting or the amount of saturation in the fill overlay

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation ='saturation';
ctx.fillStyle = "red";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

颜色为黑白

从图像中删除颜色

ctx.globalCompositeOperation = 'color';

可以使用alpha设置控制效果量

The amount of the effect can be controled with the alpha setting

// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);

// set the composite operation
ctx.globalCompositeOperation='color';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha;  // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);

这篇关于在JavaScript中复制部分CSS灰度过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！