使用HTML5转换彩色图片为黑白色.docx

!doctype html html head meta charset=utf-8 titlecanvas/title style 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; } /style script (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); } }