html5 更新图片颜色示例代码
摘要:代码如下:varcID="c1";varimage=newImage();image.src="Eye/item_eye_1.png";im...
代码如下:
<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>
【html5 更新图片颜色示例代码】相关文章:
★ Html5 FileReader实现即时上传图片功能实例代码
上一篇:
Html5 语法与规则简要概述
下一篇:
HTML5图片预览实例
相关阅读
网友关注
网友最新关注视频
- 外研版英语七年级下册module3 unit2第一课时
- 【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案,安徽省
- 北师大版八年级物理下册 第六章 常见的光学仪器(二)探究凸透镜成像的规律
- 【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,湖北省
- 冀教版小学数学二年级下册第二周第2课时《我们的测量》宝丰街小学庞志荣.mp4
- 沪教版八年级下册数学练习册21.3(3)分式方程P17
- 三年级英语单词记忆下册(沪教版)第一二单元复习
- 外研版英语七年级下册module1unit3名词性物主代词讲解
- 外研版英语三起5年级下册(14版)Module3 Unit2
- 冀教版英语三年级下册第二课
精品推荐