返回列表 发新帖

html5 更新图片颜色示例代码

258.3k 9
swmozowtfl 发表于 2015-7-10 22:26:26|湖北 | 查看全部 阅读模式
代码如下:* T6 H7 Q! U: U9 P, s# Q& V
<canvas id=c1 width=1220 height = 880 style=background: none repeat scroll 0% 0% transparent; ></canvas> ; w' G3 b/ |" x. {3 g) q/ E
<script> ( j0 n9 A2 r' c$ C5 q
var cid = c1;
' J8 H% [. ^# A" k  v. M. M! G7 Nvar image = new image(); 4 p- f* r0 e$ _8 B6 P
image.src = eye/item_eye_1.png; * q0 q! ]' I; ~8 O# d' ?3 g9 K. |
image.onload = function () {
+ _3 s' p7 {6 zrecolorimage(cid,image, 0, 0, 0, 255, 0, 0);
& h& j' k4 o6 H7 c) r, b}
& N6 D: j. n) q  X! q& i- z4 ^- Qfunction recolorimage(c,img, oldred, oldgreen, oldblue, newred, newgreen, newblue) {
: S0 Z0 H' S  ^2 cvar c = document.getelementbyid(c); 1 h9 ^* ?" K3 K& j7 j( Z- \, v  }
var ctx = c.getcontext(2d); ( ^- y$ F& n' m4 {" e
var w = img.width;
1 u0 t- `1 q$ K& z2 ivar h = img.height;
/ n0 M# m0 k* J& Yc.width = w; 9 ?; F  Z9 H; [. d$ ?/ s
c.height = h;
. ^+ j* j4 s$ V; ]. b// draw the image on the temporary canvas & s2 q. j3 D  \" ^, |* c5 z( ^6 Y& O
ctx.drawimage(img, 0, 0, w, h); ' n' Z: l5 H, @9 f
// pull the entire image into an array of pixel data
- @0 R- U& x( t( w/ o" svar imagedata = ctx.getimagedata(0, 0, w, h); 4 K  F5 j4 L2 P, i2 F+ }$ ~) |
// examine every pixel, ) ~# F, C* `8 \1 h! T" F1 Z  V
// change any old rgb to the new-rgb 2 ~) V- f* j9 h& u; ^! [" h' T# E3 c
for (var i = 0; i < imagedata.data.length; i += 4) { 0 `' e" I2 a4 p6 K3 P4 Y
// is this pixel the old rgb? ' v7 `; `  W* g2 h
if (imagedata.data == oldred && imagedata.data[i + 1] == oldgreen && imagedata.data[i + 2] == oldblue) {
$ w% C6 F3 i7 N4 U4 v+ ~# Z// change to your new rgb
* W$ D" z0 b# W4 H) f7 |& A# wimagedata.data = newred;
, ]+ B  o9 C* S7 t, O0 \imagedata.data[i + 1] = newgreen; 6 Y' ~" C: x6 J: D
imagedata.data[i + 2] = newblue; " \( i0 a1 p9 U! u
}
# `; Z1 `5 w2 d- l}
  k8 i8 h( E8 ?8 z$ G// put the altered data back on the canvas 4 @+ Z5 z2 K& \9 U' D4 J3 _* [9 W; d
ctx.putimagedata(imagedata, 0, 0);
2 |9 v6 V* @" ^2 j/ @' J} 1 C1 p9 o) l0 P% I4 {# {9 O4 j" s# w
</script> ! |: n5 k; E1 ?9 I: f$ R
, t9 {. G7 B0 V) n( y2 W5 s% {, s( @9 L
更多网页制作信息请查看: 网页制作

回复|共 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技术交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表