这篇文章给大家介绍html5中怎么更新图片颜色,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了太康免费建站欢迎大家使用!
<canvas id="c1" width="1220" height = "880" ></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中怎么更新图片颜色就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网页名称:html5中怎么更新图片颜色
路径分享:https://www.cdcxhl.com/article24/igoije.html
成都网站建设公司_创新互联,为您提供搜索引擎优化、网站改版、静态网站、关键词优化、服务器托管、App设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联