我想编写一个函数，它接受一个 png 并将其着色为红色、蓝色和绿色，并将其存储为新的图像对象。因此，我使用 2 个辅助 Canvas 和 1 个 Canvas 来显示结果。目前红色的结果不可见:

js fiddle code

js

var tintCanvas = document.createElement('canvas');
tintCanvas.width = 20;
tintCanvas.height = 20;
var tintCtx = tintCanvas.getContext('2d');

var renderCanvas = document.createElement('canvas');
renderCanvas.width = 20;
renderCanvas.height = 20;
var renderCtx = tintCanvas.getContext('2d');

var canvas = document.getElementById('canvasA');
var ctx = canvas.getContext('2d');



var pic = new Image();
pic.onload = function () {
tintCtx.fillStyle = '#ff3633';
tintCtx.fillRect(x,y,20,20);
tintCtx.globalCompositeOperation = "destination-atop";
tintCtx.drawImage(pic, x, y);

renderCtx.drawImage(pic, x, y);
renderCtx.globalAlpha = 0.5;
renderCtx.drawImage(tintCanvas, x, y);
}
pic.src = 'http://jsfiddle.net/img/logo.png';
var x = 0;
var y = 0;

var red = new Image();
red.src = renderCanvas.toDataURL();


ctx.drawImage(red, 22,22);

câu trả lời hay nhất

您可以创建每种所需的颜色一次，然后将其存储为图像以供重复使用。

// create an image from the canvas and push the image into an array for reuse
var img=new Image();
img.src=canvas.toDataURL();
myColoredImages.push(img);

您可以使用source-in合成操作对图像重新着色:

function recolor(color){
    ctx.save();
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(pic, 0, 0);
    ctx.globalCompositeOperation = "source-in";
    ctx.fillStyle=color;
    ctx.rect(0,0,canvas.width,canvas.height);
    ctx.fill();
    ctx.restore();
}

这是一个必须在 Chrome 或 FF 中查看的 Fiddle(CORS 问题):http://jsfiddle.net/m1erickson/Yqg2Y/

这里是代码:

<đầu>
 



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



$(hàm(){

    var canvas = document.getElementById('canvas');       
    var ctx = canvas.getContext('2d');
    var canvas2 = document.getElementById('canvas2');       
    var ctx2 = canvas2.getContext('2d');

    var colors=[];

    var pic = new Image();
    pic.onload = function() {
        canvas.width=pic.width;
        canvas.height=pic.height;
        canvas2.width=pic.width;
        canvas2.height=pic.height;
        ctx.drawImage(pic,0,0);
        colors.push(recolor("red"));
        colors.push(recolor("green"));
        colors.push(recolor("blue"));
    }
    pic.crossOrigin="anonymous";
    pic.src = 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp.png';

    function recolor(color){
        ctx.save();
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(pic, 0, 0);
        ctx.globalCompositeOperation = "source-in";
        ctx.fillStyle=color;
        ctx.rect(0,0,canvas.width,canvas.height);
        ctx.fill();
        ctx.restore();
        var img=new Image();
        img.src=canvas.toDataURL();
        return(img);
    }

    function loadColor(n){
        ctx2.clearRect(0,0,canvas2.width,canvas2.height);
        ctx2.drawImage(colors[n],0,0);
    }

    $("#red").click(function(){ loadColor(0); });
    $("#green").click(function(){ loadColor(1); });
    $("#blue").click(function(){ loadColor(2); });

}); // end $(function(){});





    
    

    Red
    Green
    Blue