个人中心
gpt4 book ai didi

javascript - Canvas:对 png 进行着色并存储为新图像

转载 作者：行者123 更新时间：2023-11-28 20:28:37 31 4
gpt4 key购买 nike

我想编写一个函数，它接受一个 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);

最佳答案

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

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

这里是代码:

<!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>

关于javascript - Canvas:对 png 进行着色并存储为新图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16879061/

31 4 0
文章推荐： python - 指定绑定(bind)变量后的实际 SQL 语句
文章推荐： JavaScript 选择
文章推荐： JavaScript boolean 问题
文章推荐： r - 如何在 R 中创建两个列表的最小列表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com