36 evt.preventDefault();},false);
37 //设置drop事件的事件侦听
38 dp.addEventListener("drop",function(evt){
39 evt.preventDefault();
40 file_droped(evt);},false);
41 },false);
42
43 //文件被拖入时的处理
44 function file_droped(evt)
45 {
46 //清空显示区域
47 while(dp.firstChild)
48 {
49 dp.removeChild(dp.firstChild);
50 }
51 //拖动文件的File接口对象
52 var file=evt.dataTransfer.files[0];
53 //FileReader接口对象
54 reader=new FileReader();
55 //非图像文件画像时报错
56 if(!/^image/.test(file.type)){alert("请拖入图像文件");}
57 //导入拖入图像
58 reader.readAsDataURL(file);
59 reader.onload=prepare_image;
60 }
61
62 //显示拖入图像文件
63 function prepare_image(evt)
64 {
65 //创建img元素，显示拖入的图像
66 var image=document.createElement("img");
67 image.setAttribute("src",reader.result);
68 dp.appendChild(image);
69 //img元素中导入图像文档后进行后续处理
70 image.onload=function(){
71 //获取图像的尺寸
72 var w=parseInt(image.width);
73 var h=parseInt(image.height);
74 //创建canvas对象，导入图像
75 var canvas=document.createElement("canvas");
76 canvas.width=w;
77 canvas.height=h;
78 var ctx=canvas.getContext("2d");
79 ctx.drawImage(image,0,0);
80 //取得canvas像素数据
81 var imagedata=ctx.getImageData(0,0,w,h);
82
83 //进行黑白转换
84 convert_image_to_gray_scale(imagedata.data);
85
86 //替换canvas中的像素数据
87 ctx.putImageData(imagedata,0,0);
88
89 //显示canvas
90 dp.appendChild(canvas);
91 }
92 }
93
94 //黑白变换函数
95 function convert_image_to_gray_scale(data)
96 {
97 var len=data.length;
98 var pixels=len/4;
99 for(var i=0;i<pixels;i++){
100 //取出R,G,B值
101 var r=data[i*4];
102 var g=data[i*4+1];
103 var b=data[i*4+2];
104
105 //进行黑白变换
106 var t=parseInt((11*r+16*g+5*b)/32);
107 //将变换后的像素数据设置到原来数组元素中
108 data[i*4]=t;
109 data[i*4+1]=t;
110 data[i*4+2]=t;
111 }
112 }
113
114 })();
115 </script>
116
117 </head>
118 <body>
119 <div id="dp">
120 <p>将桌面图像文件拖动到此处。</p>
121 </div>
122 </body>
123 </html>
转载请注明来源：HTML5移动开发学习笔记之Canvas基础标签：PHP ,CSS数据库 ,优化
相关文章
精彩导读
热门资讯
关注我们
