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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML5 Blob对象的具体使用
May 22 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
药店促销活动策划方案
2014/08/24 职场文书
户籍证明格式
2014/09/15 职场文书
法制工作总结2015
2015/07/23 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python