画布：色调PNG和作为新图像存储

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

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

来源

2013-06-02 user2441292

您可以一次创建每个所需的颜色，然后将它保存为重复使用的图像。

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

可以使用源的组合操作来重新着色的图像：

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>

来源

2013-06-02 02:01:50 markE

谢谢，你快，男人！ – user2441292

画布：色调PNG和作为新图像存储

回答

相关问题