html5 更新图片颜色
2014-07-24 21:12
246 查看
<canvas id="c1" width="1220" height = "880" style="background: none repeat scroll 0% 0% transparent; "></canvas>
<script>
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);
}
</script>
<script>
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);
}
</script>
相关文章推荐
- html5 更新图片颜色示例代码
- html5学习(1):插入图片|设置颜色|嵌入搜索|设置字体
- 使用word中的宏脚本批量修改图片的显示比例及更新交叉引用的颜色
- html5如何及时更新缓存文件(js、css或图片)
- HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
- html5如何及时更新缓存文件(js、css或图片)
- HTML5-背景颜色图片-班级-展开收起-懒加载
- 两种修改png图片颜色方法的对比/游戏帧速度处理/J2me中实现淡入淡出效果
- 消除图片在ie中缓存而无法更新的问题
- 图片自动更新(说明)
- 对图片上的颜色进行转换
- Panoramio图片翻倍并更新Google Earth
- textarea背景图片|背景颜色
- 如何去除图片超链接边框的颜色
- Iframe中使用JS事先切换背景颜色、背景图片的效果
- [Flex]带有增加水印的图片上传控件--KUpload v0.2教程和测试地址(2007年4月13日更新)
- JS 切换图片 (简单模式) 字体颜色,大小变化
- 把图片变换颜色!
- 介绍一下德国的同志们(图片正在整理)[今天(2005.1.12)更新][附勘误表]
- 两种修改png图片颜色方法的对比