<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
canvas {
border: 1px solid black;
}
#dp{
min-height: 70px;
border: 1px solid #000000；
background-color:#eeeeee;
}
</style>
</head>
<body>
<div id='dp'>
<p>将图片文件拖到此处</p>
</div>
<script type="text/javascript">
(function (){
var dp = null;
var reader = null;
/*
页面导入时处理
*/
window.addEventListener("load", function(){
// 拖动区域的div元素
dp = document.getElementById("dp");
// 设置 dragover 事件的监听
dp.addEventListener("dragover", function (evt){
evt.preventDefault();
},false);
// 设置 drop 事件的监听
dp.addEventListener("drop", function (evt){
evt.preventDefault();
file_droped(evt)
},false);
},false);
/*
文件拖入时处理
*/
function file_droped(evt){
//清空显示区域
while(dp.firstChild){
dp.removeChild(dp.firstChild);
}
// 拖入文件的file接口对象
var file = evt.dataTransfer.files[0];
// filereader 的接口对象
reader = new FileReader();
if(! /^image/.test(file.type)){
alert('err')
}
// 导入拖入图片
reader.readAsDataURL(file);
reader.onload = prepare_image;
}
/*
显示拖入文件
*/
function prepare_image(evt){
// 创建img元素
var image = document.createElement("img");
image.setAttribute("src",reader.result);
dp.appendChild(image);
image.onload = function(){
var w = parseInt(image.width);
var h = parseInt(image.height);
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++) {
// 取出rgb值
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;
};
}
})();
</script>
</body>
</html>
