有没有什么办法在JQuery中更改图像的一部分？

如果我有一个图像（jpg，png，gif，实际上并不重要），我想让一些javascript代码更改图像的一部分。例如，可以说i have this picture of a cookie like here。有没有什么办法在JQuery中更改图像的一部分？

和我有一个颜色选择器，让人选择一种颜色。我想改变图像部分的颜色（在这种情况下，让我们说巧克力芯片的颜色）为采摘的颜色。

是可以做的JavaScript/jQuery中？

来源

2011-09-03 leora

不是没有html5。我相信访问图像客户端内容的唯一方法是与

你可能会通过绝对或相对定位来做一些与PNG文件重叠的文件。例如，饼干是一个大多不透明的PNG - 除了透明的芯片的一些“洞”，透露它背后的深棕色背景。然后，如果用户选择“较深的巧克力片”，则只需将背景颜色更改为黑色即可。或者饼干是不透明的，“chocolote筹码”是位于顶部的单独图像。 – selbie

@selbie - 你知道我会如何将芯片“提取出”成一个单独的图像或使用Photoshop等图层？ – leora

它可能与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提供的帮助相关的内容。

来源

2011-09-03 01:45:26 Loktar

这就是我需要帮助的例子。在jQuery中，我已经检测到嘴巴，你能帮助我如何改变牙齿的颜色。我得到了所有像素的嘴巴。我怎么能改变颜色只是牙齿。 –

有没有什么办法在JQuery中更改图像的一部分？

回答

相关问题