HTML5 canvas 实现本地文件上传预览功能

在以前，要用web来实现图片上传预览功能必须借助插件或者flash来实现。但是现在我们可以借助 HMTL5 的 canvas 来实现这个功能。

例如下面的效果

实现该功能很简单，首先我们要建一个表单，用于用户选取图片。

<input type="file" name="picture" accept="image/png, image/jpeg"/>

一旦用户选中图片，将其显示在canvas的函数可以这样写：

document.querySelector('input[name=picture]').onchange = function(e){
     readFile(e.target.files[0]);
}
function readFile(file){
  var reader = new FileReader();
  reader.onload = function(e){
    applyDataUrlToCanvas( reader.result );
  };
  reader.readAsDataURL(file);
}

还可以在canvas上面定义拖放事件，允许用户直接拖放图片到上面。

// stop FireFox from replacing the whole page with the file.
canvas.ondragover = function () { return false; };
// Add drop handler
canvas.ondrop = function (e) {
  e.stopPropagation();
  e.preventDefault(); 
  e = e || window.event;
  var files = e.dataTransfer.files;
  if(files){
    readFile(files[0]);
  }
};

所有的拖放事件都有一个dataTransfer属性，它包含拖放过程涉及的二进制数据。

还可以让canvas显示剪贴板中的图片。

document.onpaste = function(e){
  e.preventDefault();
  if(e.clipboardData&&e.clipboardData.items){
    // pasted image
    for(var i=0, items = e.clipboardData.items;i<items.length;i++){
      if( items[i].kind==='file' && items[i].type.match(/^image/) ){
        readFile(items[i].getAsFile());
        break;
      }
    }
  }
  return false;
};

： » HTML5 canvas 实现本地文件上传预览功能