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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 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
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python 函数返回值的示例代码
2019/03/11 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
Python 如何实现访问者模式
2020/07/28 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
行政办公室岗位职责
2014/03/18 职场文书
服务理念口号
2014/06/11 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
个人工作能力自我评价
2015/03/05 职场文书
会计求职自荐信
2015/03/26 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书