HTML黑白触摸变彩色,使用HTML5 转换彩色图片为黑白色知识讲解.doc

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 ){ // 清空