有沒有什麼辦法在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中更改圖像的一部分？

回答

相關問題