0
我試過了，但我無法做到。
我選擇一個圖像顯示在<img src=" " onload="getPixels(this)" id="mug"/>然後該功能改變圖像顏色。更改圖片onclick並更改畫布上的圖像顏色
當我再次更改圖像時，其顏色不會改變，但會改變第一張圖像的顏色，而不是更改新圖像的顏色。
幫助我，請我沒有任何想法:(
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<img src="<?=''?>" onload="getPixels(this)" id="mug"/>
<a onClick="showImage(this);" href="#bg/big-polka-dots.png" data-href="bg/big-polka-dots.png">
<img src="bg/big-polka-dots.png" width="35" height="56"/>
</a>
<a onClick="showImage(this)" href="#bg/chevron-navy.png" data-href="bg/chevron-navy.png">
<img src="bg/chevron-navy.png" width="35" height="56"/>
</a>
<a onClick="showImage(this)" href="#bg/maple-leaf-lattice.png" data-href="bg/maple-leaf-lattice.png">
<img src="bg/maple-leaf-lattice.png" width="35" height="56"/>
</a>
<a onClick="showImage(this)" href="#bg/stars-navy.png" data-href="bg/stars-navy.png">
<img src="bg/stars-navy.png" width="35" height="56"/>
</a>
<script>
function showImage(link)
{
var url = link.href;
url = url.substr(url.indexOf('#')+1);
document.getElementById("mug").src=url;
}
</script>
<div style="background-color:#B4CBEC; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#16becf; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#ade8e8; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#57d2c8; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#77989f; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#8dc63f; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#45b44a; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#b9eac6; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#2fb595; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#38605b; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#92278f; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#b16fc1; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#dbbadb; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#b3b3b3; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#f9ed32; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#fbb040; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#be1e2d; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#f16667; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#fabfa5; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#f0a0ab; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#808080; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div style="background-color:#FFF; width:40px; height:40px; margin:5px; float:left; cursor:pointer; border: 1px double #EAE8E8;"></div>
<div id="result" name="result" style="visibility:hidden; width:40px; height:40px; margin:5px; float:left;"></div>
<script>
var mug = document.getElementById("mug");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;
function HexToRGB(Hex)
{
var Long = parseInt(Hex.replace(/^#/, ""), 16);
return {
R: (Long >>> 16) & 0xff,
G: (Long >>> 8) & 0xff,
B: Long & 0xff
};
}
</script>
<script>
function rgbToHex(color) {
if (color.substr(0, 1) === "#") {
return color;
}
var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
r = parseInt(nums[2], 10).toString(16),
g = parseInt(nums[3], 10).toString(16),
b = parseInt(nums[4], 10).toString(16);
return "#"+ (
(r.length == 1 ? "0"+ r : r) +
(g.length == 1 ? "0"+ g : g) +
(b.length == 1 ? "0"+ b : b)
);
}
$("div").click(function() {
var color = $(this).css("background-color");
var color2 = rgbToHex(color);
changeColor(document.getElementById("result").innerHTML = color2);
});
function changeColor()
{
if(!originalPixels) return; // Check if image has loaded
if(document.getElementById("result").innerHTML =='') return;
var newColor = HexToRGB(document.getElementById("result").innerHTML);
for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
{
if(currentPixels.data[I + 3] > 0)
{
currentPixels.data[I] = originalPixels.data[I]/255 * newColor.R;
currentPixels.data[I + 1] = originalPixels.data[I + 1]/255 * newColor.G;
currentPixels.data[I + 2] = originalPixels.data[I + 2]/255 * newColor.B;
}
}
ctx.putImageData(currentPixels, 0, 0);
mug.src = canvas.toDataURL("image/png");
}
function getPixels(img)
{
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
originalPixels = ctx.getImageData(0, 0, img.width, img.height);
currentPixels = ctx.getImageData(0, 0, img.width, img.height);
img.onload = null;
}
</script>