javascript - JQuery 中有什么方法可以更改图像的一部分吗？

Question

如果我有一张图片(jpg、png、gif。其实并不重要)并且我想要一些 javascript 代码更改图片的一部分。

例如，假设 i have this picture of a cookie like here .

我有一个颜色选择器，可以让人们选择一种颜色。我想将部分图像的颜色(在这种情况下，可以说是巧克力片的颜色)更改为选择的颜色。

在 javascript/jquery 中可以做到吗？

Answer 1

可以通过 Javascript 和 canvas 元素直接操作像素数据。下面的示例将蓝色变成红色。

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

canvas.height = canvas.width = 45;
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 45, 45),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    if(pix[i + 2] > 20){ // Blue threshold
        // Swap red and blue component values.

        var redVal = pix[i]; // Copy the current red component value
        pix[i] = pix[i + 2]; // Assign the current blue component value to red
        pix[i+2] = redVal; // Assign the old red value to blue.
    }
}

ctx.putImageData(imgd, 0, 0);

但是，这样做的速度不是很快，而且对于较大的图像，您会看到明显的性能下降，具体取决于浏览器。至于 jQuery，jQuery 提供的与此无关的任何内容都不会有所帮助。