返回列表 发新帖

html5 更新图片颜色示例代码

258.7k 9
swmozowtfl 发表于 2015-7-10 22:26:26|湖北 | 查看全部 阅读模式
代码如下:, s+ i5 `7 p$ x# \( K& I
<canvas id=c1 width=1220 height = 880 style=background: none repeat scroll 0% 0% transparent; ></canvas> $ Q- B; J0 u4 f5 U. H
<script>
" ^1 Y7 |% ^( V2 Q, Avar cid = c1; 8 K- z' C- Z* z# f
var image = new image();
5 k) t& J. I  w$ P% {image.src = eye/item_eye_1.png; " {1 p) p0 t# {! x. Z$ ]( |& z! S
image.onload = function () {
3 E1 D- K3 T; |7 X/ Y( s, Erecolorimage(cid,image, 0, 0, 0, 255, 0, 0);
$ M) a& N( {: V" V} + n% v2 {6 S  S; Y. d
function recolorimage(c,img, oldred, oldgreen, oldblue, newred, newgreen, newblue) {
* y: e# c6 G. Wvar c = document.getelementbyid(c);   {0 }# J6 d! ^. {' |
var ctx = c.getcontext(2d);
! C0 t1 \" x8 k# z, t& Rvar w = img.width; ) v) c9 T2 J+ p0 d2 n
var h = img.height;
9 E( X1 k/ ~& D* b( w% F4 Fc.width = w; ! b0 x- d$ P& a9 r2 d; t
c.height = h;
! {3 E8 U6 |, T8 a- f// draw the image on the temporary canvas & Z$ y, v$ B' ~9 @+ n8 u
ctx.drawimage(img, 0, 0, w, h); $ S: E  _9 |& g, |/ H
// pull the entire image into an array of pixel data - |0 N& y3 O+ E- X6 ^) q
var imagedata = ctx.getimagedata(0, 0, w, h);
2 h( ?7 K5 g+ Z- D: ^- s& @. [// examine every pixel,
) N2 Y; Q0 I; G5 d( p. Z; B+ {// change any old rgb to the new-rgb
& N' D: y2 G+ r! {for (var i = 0; i < imagedata.data.length; i += 4) { + B+ P$ V- m4 H8 e$ K4 I
// is this pixel the old rgb?
, m5 q) c/ t" K1 b2 Hif (imagedata.data == oldred && imagedata.data[i + 1] == oldgreen && imagedata.data[i + 2] == oldblue) { / l( \" E% X7 l( B: G+ ]& M
// change to your new rgb . {# ?* n& A1 Z5 s2 }( w6 |
imagedata.data = newred; 8 j8 p9 R7 v, v  s4 T
imagedata.data[i + 1] = newgreen; * T! C* t9 {, ^9 a
imagedata.data[i + 2] = newblue; ; m  t! h. L. b- j+ n
} / G2 I* H3 p% G2 T3 J  @! G# E8 n' r
}
0 ^, k% u, n' y! c8 h3 I// put the altered data back on the canvas 0 Q% J" A' a1 T/ G, S" J
ctx.putimagedata(imagedata, 0, 0);
/ P# Y. ~0 P$ a4 t. Q  h% \}
) F3 _% v% `' y3 |  r& o5 Z</script> , o" I8 X7 B: g- k) o
8 K% a: v3 H. L' O! b  y
更多网页制作信息请查看: 网页制作

回复|共 9 个

effoggikeftor 发表于 2015-12-16 09:58:55|美国 | 查看全部
看起来好~~像啊~~~~~
gevaemaidovef 发表于 2015-12-16 09:59:15|印度 | 查看全部
你这样的表现,就只配这几个字:窝囊废
tohme 发表于 2015-12-16 09:59:31|澳大利亚 | 查看全部
呵呵 放心 如我算错 你以后来砸我的帖子 呵呵
tohme 发表于 2015-12-16 09:59:55|乌克兰 | 查看全部
现在做什么网站好?
seazvyt 发表于 2016-2-12 15:42:10|美国 | 查看全部
现在做什么网站好?
GoodyFouppy 发表于 2016-2-12 15:42:26|美国 | 查看全部
您知道这个论坛的站长是谁吗?偷偷的告诉你他叫叶学得  好厉害的样子
GoodyFouppy 发表于 2016-2-12 15:42:38|英国 | 查看全部
哈哈~` 好久没有笑喽~
Acropozelan 发表于 2016-2-12 15:42:58|Reserved | 查看全部
因删贴不及时所产生的任何法律(书法,基本法,劳动法,婚姻法,输入法,国际法,今日说法,与台湾关系法及文中涉及或可能涉及以及未及之法,各地治安管理条例)纠纷或责任本人概不负责。
tohme 发表于 2016-2-12 15:43:00|卢森堡 | 查看全部
本人在此留言均为网络上复制,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能。并不代表本人局部或全部同意、支持或者反对楼主观点。

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表