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

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

在以前，要用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;
};

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » HTML5 canvas 实现本地文件上传预览功能