canvas body font family 宋体 Arial Helvetica sans serif font size 80 dp width 200px min height 70px border 1px solid 000 background color eee padding 1em margin 2em dp img margin right 1em function 拖动区域的 div 元素 var dp null FileReader 接口对象 var reader null 页面导入时处理 window addEventListener load function dp document getElementById dp 拖动区域 的 div 元素 dp addEventListener dragover function evt 设置 dragover 事件的事件监听 evt preventDefault false dp addEventListener drop function evt 设置 drop 事 件的时间监听 evt preventDefault console log evt file droped evt false false 文件被拖入时处理 function file droped evt while dp firstChild 清空显示区域 dp removeChild dp firstChild var file evt dataTransfer files 0 拖入文件的 File 接口 对象 reader new FileReader fileReader 接口 对象 非图像文件画像时报错 if image test file type JS 正则 使用正则的 test 方法检测 file type 返回值中是否有 image 开头的字符串 alert 请拖入图像文件 导入拖图文件 reader readAsDataURL file reader onload prepare image 显示拖入图像文件 function prepare image 创建 img 元素 显示拖入的图像 var image document createElement img image setAttribute src reader result dp appendChild image img 元素中导入图像文档后进行后续处理 image onload function 获取图像的尺寸 var w parseInt image width var h parseInt image height dp style width w px 创建 canvas 对象 导入图像 var canvas document createElement canvas canvas width w canvas height h var ctx canvas getContext 2d ctx drawImage image 0 0 取得 canvas 的图像像素数据 var imagedata ctx getImageData 0 0 w h 进行黑白转换 convert image to gray scale imagedata data 替换 canvas 中的像素数据 ctx putImageData imagedata 0 0 显示 canvas dp appendChild canvas 黑白变换函数 function convert image to gray scale data var len data length var pixels len 4 for var i 0 i pixels i 取出 R G B 值 var r data i 4 var g data i 4 1 var b data i 4 2 进行黑白转换 var g parseInt 11 r 16 g 5 b 32 data i 4 g data i 4 1 g data i 4 2 g 将桌面图像文件拖动到此处 效果图 拖入图片后

展开阅读全文