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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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打开文件fopen函数的使用说明
2013/07/05 PHP
php给图片加文字水印
2015/07/31 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
新领导上任欢迎词
2014/01/13 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
企业文化标语口号
2014/06/09 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
办公经费申请报告
2015/05/15 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
Django与数据库交互的实现
2021/06/03 Python