使用HTML5 转换彩色图片为黑白色
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
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 ];