HTML5 之图片上传预处理

在开发 H5 应用的时候碰到一个问题,
应用只需要一张小的缩略图,
而用户用手机上传的确是一张大图,
手机摄像机拍的图片好几 M,这可要浪费很多流量。

获取图片

通过 File API 获取图片。

var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function() {
  var file = this.files[0];
},false);
input.click();

预览图片

可以使用 createObjectURL() 或者 FileReader 预览图片
但是我一般用的createObjectURL()方法比较多

var img = document.createElement('img');
img.src = window.URL.createObjectURL(file);
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {
  img.src = e.target.result;
}
reader.readAsDataURL(file);

使用 canvas 做缩略图

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);

上传缩略图

使用HTML5的新API formData来实现图片的ajax上传

canvas.toBlob(function(blob) {
  var form = new FormData();
  form.append('file', blob);
  fetch('/api/upload', {method: 'POST', body: form});
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作者/Jeff 编辑/儒商诗人 来源于:人人都是产品经理 作者:Jeff 姐夫 全文共 6209 字,阅读需要 1...
    儒商诗人阅读 2,910评论 0 4
  • 01. 那个时候我还是一个少年,每天放学回家会经过一个小山坡。从这个山坡上可以望见远处的夕阳一点点地落下去。我知道...
    istolove阅读 4,862评论 7 35
  • 1.下载docker镜像 2. 下载插件 下载插件是需要激活code和nessused serverchallen...
    heliping_peter阅读 5,926评论 0 0
  • 秦汉大陆,居摄三年,地皇王莽篡立,西汉亡。世家门阀,各路诸侯烽烟四起。生灵涂炭,十室九空,大汉上族遭遇这滔天人...
    干叔阅读 916评论 0 0