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

HTML5 herman 1767浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xmtxtt,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序

在以前,要用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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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