Question

如果我有一个图像（jpg，png，gif。并不重要），我想让一些javascript代码更改图像的一部分。

例如，让我们说i have this picture of a cookie like here。

我有一个让人选择颜色的颜色选择器。我想将图像的一部分颜色（在这种情况下，比如巧克力片的颜色）更改为拾取的颜色。

可以在javascript / jquery中做到吗？

Answer 1

通过直接操作像素数据，可以使用Javascript和canvas元素。以下示例将蓝色变为红色。

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提供的帮助。

在JQuery中有什么方法可以改变图像的一部分吗？

1 个答案: