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 相关文章推荐
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Javascript 实用小技巧
2010/04/07 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Python实现类继承实例
2014/07/04 Python
Python中functools模块函数解析
2017/03/12 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
python mock测试的示例
2020/10/19 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
找工作最新求职信
2013/12/22 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
分公司任命书
2014/06/06 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
卡特教练观后感
2015/06/08 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js