html5 更新图片颜色示例代码


Posted in HTML / CSS onJuly 29, 2014

复制代码
代码如下:

<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>
HTML / CSS 相关文章推荐
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
Html5 语法与规则简要概述
Jul 29 #HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 #HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 #HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 #HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 #HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 #HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 #HTML / CSS
You might like
PHP 第二节 数据类型之转换
2012/04/28 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
优秀教师主要事迹
2014/02/01 职场文书
大学生村官考核材料
2014/05/23 职场文书
学习经验交流会策划书
2015/11/02 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python