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隔行变换色实现示例
Feb 19 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 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
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python binascii 进制转换实例
2019/06/12 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
大学生个人求职信范文
2013/09/21 职场文书
本科生个人求职自荐信
2013/09/26 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
白银帝国观后感
2015/06/17 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
Django Paginator分页器的使用示例
2021/06/23 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript