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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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实现无限极分类图文教程
2014/11/25 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python实现自动登录后台管理系统
2018/10/18 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
详解Python的循环结构知识点
2019/05/20 Python
Python中os模块功能与用法详解
2020/02/26 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
运动会跳远广播稿
2014/02/04 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
网聊搭讪开场白
2015/05/28 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript