Canvas: tint a png и сохранить как новое изображение

Я хочу написать функцию, которая берет png и оттеняет ее красным, синим и зеленым и сохраняет ее как новые объекты изображения. Поэтому я использую 2 хелперных холста и один холст для отображения результата. На данный момент результат для красного не видно:Canvas: tint a png и сохранить как новое изображение

js fiddle code

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

Canvas: tint a png и сохранить как новое изображение

ответ

Смежные вопросы