得知互动
标题:
html5 更新图片颜色示例代码
[打印本页]
作者:
swmozowtfl
时间:
2015-7-10 22:26
标题:
html5 更新图片颜色示例代码
代码如下:
7 `% N9 d1 b. S6 _& B
<canvas id=c1 width=1220 height = 880 style=background: none repeat scroll 0% 0% transparent; ></canvas>
3 p7 V- \! l. ]/ ^) f4 h d
<script>
- i8 g/ \' X4 w+ Y: d
var cid = c1;
3 {( [+ R" ^6 Z0 F& L7 O' r6 J
var image = new image();
' |8 X" G f, P; b0 M
image.src = eye/item_eye_1.png;
% g7 `2 \# f% V$ H& i* ]/ z/ P
image.onload = function () {
3 g3 G8 B: M6 f1 R# b" o
recolorimage(cid,image, 0, 0, 0, 255, 0, 0);
7 ]5 J* X Z0 {$ h! }2 n4 I, b0 M
}
, C+ J7 e) J# q" E' N/ M# S/ ]
function recolorimage(c,img, oldred, oldgreen, oldblue, newred, newgreen, newblue) {
' A0 s1 S! \( \0 F! _
var c = document.getelementbyid(c);
" B; H( n- H7 ^, F& A
var ctx = c.getcontext(2d);
! k. `! S1 s, V* [. b/ S: B% U5 ?6 @
var w = img.width;
' O8 F$ H0 a5 q
var h = img.height;
5 U: o9 t/ ~$ @" H$ k% ~0 Z9 ?
c.width = w;
2 b5 A: e; L) O
c.height = h;
+ V( T; a! D; R
// draw the image on the temporary canvas
8 F0 U9 v4 m# G
ctx.drawimage(img, 0, 0, w, h);
9 W3 M& j# r9 ]% z u
// pull the entire image into an array of pixel data
3 \& L: Z$ k: y k3 e, M8 v6 k: O
var imagedata = ctx.getimagedata(0, 0, w, h);
$ i# A! [" {" W, F# l
// examine every pixel,
4 O4 a5 {1 e$ Q/ l2 L, [' V
// change any old rgb to the new-rgb
: Y2 t8 ?# M5 ^% i. q8 B
for (var i = 0; i < imagedata.data.length; i += 4) {
2 l3 e0 h6 [ ` k0 p# O
// is this pixel the old rgb?
; z, ~3 k# }) z2 y2 p- j- S
if (imagedata.data
== oldred && imagedata.data[i + 1] == oldgreen && imagedata.data[i + 2] == oldblue) {
) j7 e% c! v! o7 k; C& i
// change to your new rgb
! U: Z" C, b) E* @6 J
imagedata.data
= newred;
% O7 r: ?( A4 Y
imagedata.data[i + 1] = newgreen;
% Z. I' \7 M3 j& } J0 O2 [
imagedata.data[i + 2] = newblue;
+ I) v& W" C4 Z0 h
}
1 k2 _$ B" x4 U( X$ h% u, `8 w
}
, r$ {6 @8 H: D% G1 g5 p2 t2 \
// put the altered data back on the canvas
2 o, z* U# D$ {2 Q' T
ctx.putimagedata(imagedata, 0, 0);
5 n$ s* t" x& n$ v' C2 ]
}
' e6 N" o2 @' x. M. ? ^
</script>
6 S/ ^5 x( B f* p) X
+ h& _, _. _5 N! H' Y' m
更多网页制作信息请查看： 网页制作
作者:
effoggikeftor
时间:
2015-12-16 09:58
看起来好~~像啊~~~~~
作者:
gevaemaidovef
时间:
2015-12-16 09:59
你这样的表现，就只配这几个字：窝囊废
作者:
tohme
时间:
2015-12-16 09:59
呵呵 放心 如我算错 你以后来砸我的帖子 呵呵
作者:
tohme
时间:
2015-12-16 09:59
现在做什么网站好？
作者:
seazvyt
时间:
2016-2-12 15:42
现在做什么网站好？
作者:
GoodyFouppy
时间:
2016-2-12 15:42
您知道这个论坛的站长是谁吗？偷偷的告诉你他叫叶学得 好厉害的样子
作者:
GoodyFouppy
时间:
2016-2-12 15:42
哈哈~` 好久没有笑喽~
作者:
Acropozelan
时间:
2016-2-12 15:42
因删贴不及时所产生的任何法律（书法，基本法，劳动法，婚姻法，输入法，国际法，今日说法，与台湾关系法及文中涉及或可能涉及以及未及之法，各地治安管理条例）纠纷或责任本人概不负责。
作者:
tohme
时间:
2016-2-12 15:43
本人在此留言均为网络上复制，用于检验本人电脑键盘录入、屏幕显示的机械、光电性能。并不代表本人局部或全部同意、支持或者反对楼主观点。
欢迎光临 得知互动 (https://bbs.dezhifl.com/)
Powered by Discuz! X5.0