html5 kemas kini warna imej contoh kod_html5 kemahiran tutorial

复制代码

代码如下:

imej var = Imej baharu();
image.src = "Mata/item_eye_1.png";
image.onload = fungsi () {
recolorImage(cID,imej, 0, 0, 0, 255, 0, 0);
}
fungsi recolorImage(c,img, oldRed, oldGreen, oldBlue, newRed, newGreen, newBlue) {
var c = document.getElementById(c);
var ctx = c.getContext("2d");
var w = img.width;
var h = img.height;
c.lebar = w;
c.tinggi = h;
// lukis imej pada kanvas sementara
ctx.drawImage(img, 0, 0, w, h);
// tarik keseluruhan imej ke dalam tatasusunan data piksel
var imageData = ctx.getImageData(0, 0, w, h);
// periksa setiap piksel,
// tukar mana-mana rgb lama kepada rgb baharu
untuk (var i = 0; i < imageData.data.length; i = 4) {
// adakah piksel ini rgb lama?
jika (imageData.data[i] == oldRed && imageData.data[i 1] == oldGreen && imageData.data[i 2] == oldBlue) {
// tukar kepada rgb baharu anda
imageData.data[i] = newRed;
imageData.data[i 1] = newGreen;
imageData.data[i 2] = newBlue;
}
}
// letakkan semula data yang diubah pada kanvas
ctx.putImageData(imageData, 0, 0);
}