如何在画布上重新设置灰度图像 [英] How to re-tint a grayscale image on canvas

问题描述

在画布上绘制灰度图标（带透明背景的png图片）时，是否有任何快速方法？通过colorize我的意思是转动灰度图标让我们说绿色（给定颜色的阴影，而不是灰色匹配给定的颜色主题）

Is there any quick way to colorize greyscale icon (png image with transparent background) when drawing it on canvas? By colorize I mean turning greyscale icon into lets say greenscale (shades of given color instead of grey to match given color theme)

我知道我可以手动操作每个像素，但也许有更多的自动化方式吗？

I know I could manipulate each pixel manually but maybe there's some more automated way?

推荐答案

使用合成将灰度图像重新设置为 strong>

Use compositing to re-tint a grayscale image into "greenscale".

使用合成比像素操作更快，作为一个奖励，你不会违反跨域安全限制（如果你改用 getImageData ）。

Using compositing is faster than pixel manipulation and as a bonus you won't run afoul of cross-domain security restrictions (which you do if you instead used getImageData).

1. 创建图片的完全绿色版本。
$

2. 设置 globalCompositeOperation ='color'，这会导致现有的灰度像素


3. 在画布上绘制完全绿色的图片。

1. Create a fully green version of your image.
2. Draw your grayscale image on the canvas.
3. Set globalCompositeOperation='color' which causes existing grayscale pixels to be re-tinted ("re-hued") with pixels drawn on top.
4. Draw your fully green image on the canvas.

颜色合成会将灰度变成灰度。

+ =

注意：需要使用混合功能的现代浏览器（Edge not IE）

Note: requires a modern browser with blending capabilities (Edge not IE)

和示范：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/koolBW.png";
function start(){

    // create a fully green version of img
    var c=document.createElement('canvas');
    var cctx=c.getContext('2d');
    c.width=img.width;
    c.height=img.height;
    cctx.drawImage(img,0,0);
    cctx.globalCompositeOperation='source-atop';
    cctx.fillStyle='green';
    cctx.fillRect(0,0,img.width,img.height);  
    cctx.globalCompositeOperation='source-over';

    // draw the grayscale image onto the canvas
    ctx.drawImage(img,0,0);

    // set compositing to color (changes hue with new overwriting colors) 
    ctx.globalCompositeOperation='color';

    // draw the fully green img on top of the grayscale image
    // ---- the img is now greenscale ----
    ctx.drawImage(c,0,0);
    
    // Always clean up -- change compositing back to default
    ctx.globalCompositeOperation='source-over';
}

body{ background-color:white; }
#canvas{border:1px solid red; }

<canvas id="canvas" width=256 height=256></canvas>

这篇关于如何在画布上重新设置灰度图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！