html5 更新图片颜色示例代码
2014-07-29 11:01
781 查看
<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>
相关文章推荐
- HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
- 【HTML5示例代码分享】HTML5图片自动归类特效
- html5读取本地文件 图片上传 示例代码
- 【HTML5示例代码分享】HTML5图片自动归类特效
- html5 更新图片颜色
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- 生成/读取(反向更新数据库) Excel文件(示例代码下载)
- 从数据库中读出图片并显示的示例代码
- 生成/读取(反向更新数据库) Excel文件(示例代码下载)
- 用TreeView控件实现资源管理器(显示本地硬盘下所有文件夹和文件,并可以浏览图片)(示例代码下载)
- 防百度空间的下拉框显示颜色及图片的特效代码
- 用TreeView控件实现资源管理器(显示本地硬盘下所有文件夹和文件,并可以浏览图片)(示例代码下载)
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- GDI+生成动画式的Gif图片示例代码
- 使用word中的宏脚本批量修改图片的显示比例及更新交叉引用的颜色
- [转] 生成/读取(反向更新数据库) Excel文件(示例代码下载)
- 网页制作常用代码(文字颜色/字体/插入图片/flash等
- 图片上传代码示例
- 生成/读取(反向更新数据库) Excel文件(示例代码下载)
- 用TreeView控件实现资源管理器(显示本地硬盘下所有文件夹和文件,并可以浏览图片)(示例代码下载)