Question

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

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);

Answer 1

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

// 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中查看的小提琴（CORS问题）：http://jsfiddle.net/m1erickson/Yqg2Y/

这是代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    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(){});
</script>

</head>

<body>
    <canvas id="canvas" width=200 height=200></canvas>
    <canvas id="canvas2" width=200 height=200></canvas><br>
    <button id="red">Red</button>
    <button id="green">Green</button>
    <button id="blue">Blue</button>
</body>
</html>

画布：着色一个png并存储为新图像

1 个答案: