有没有什么办法在JQuery中更改图像的一部分?
问题描述:
如果我有一个图像(jpg,png,gif,实际上并不重要),我想让一些javascript代码更改图像的一部分。例如,可以说i have this picture of a cookie like here。有没有什么办法在JQuery中更改图像的一部分?
和我有一个颜色选择器,让人选择一种颜色。我想改变图像部分的颜色(在这种情况下,让我们说巧克力芯片的颜色)为采摘的颜色。
是可以做的JavaScript/jQuery中?
答
它可能与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提供的帮助相关的内容。
+0
这就是我需要帮助的例子。在jQuery中,我已经检测到嘴巴,你能帮助我如何改变牙齿的颜色。我得到了所有像素的嘴巴。我怎么能改变颜色只是牙齿。 –
不是没有html5。我相信访问图像客户端内容的唯一方法是与
你可能会通过绝对或相对定位来做一些与PNG文件重叠的文件。例如,饼干是一个大多不透明的PNG - 除了透明的芯片的一些“洞”,透露它背后的深棕色背景。然后,如果用户选择“较深的巧克力片”,则只需将背景颜色更改为黑色即可。或者饼干是不透明的,“chocolote筹码”是位于顶部的单独图像。 – selbie
@selbie - 你知道我会如何将芯片“提取出”成一个单独的图像或使用Photoshop等图层? – leora