html 给图片加颜色代码,HTML_html5 更新图片颜色示例代码，复制代码代码如下: <canvas id= - phpStudy...

html5 更新图片颜色示例代码

复制代码代码如下:

var cID = "c1";

var image = new Image();

image.src = "Eye/item_eye_1.png";

image.onload = function () {

recolorImage(cID,image, 0, 0, 0, 255, 0, 0);

}

function 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.width = w;

c.height = h;

// draw the image on the temporary canvas

ctx.drawImage(img, 0, 0, w, h);

// pull the entire image into an array of pixel data

var imageData = ctx.getImageData(0, 0, w, h);

// examine every pixel,

// change any old rgb to the new-rgb

for (var i = 0; i < imageData.data.length; i += 4) {

// is this pixel the old rgb?

if (imageData.data[i] == oldRed && imageData.data[i + 1] == oldGreen && imageData.data[i + 2] == oldBlue) {

// change to your new rgb

imageData.data[i] = newRed;

imageData.data[i + 1] = newGreen;

imageData.data[i + 2] = newBlue;

}

}

// put the altered data back on the canvas

ctx.putImageData(imageData, 0, 0);

}

相关阅读:

js实现使用鼠标拖拽切换图片的方法

一个实用的图片切换支持点击切换和自动轮播

HTML5的download属性详细介绍和使用实例

SQL语句计算两个日期之间有多少个工作日的方法

怎么获取Win10 10525 TH2 预览版更新推送并安装？

在CentOS系统中编译安装Hiawatha服务器的教程

ajax中文乱码问题解决方案

CentOS开机时出现GRUB引导错误进入不了系统

Java基于线程实现带有滚动效果的Label标签实例

php对称加密算法示例

jQuery使用each方法与for语句遍历数组示例

C语言二分查找算法及实现代码

文科生也能看懂的Linux iptables入门教程

关于多个Ajax请求执行返回先后的问题示例探讨