图片纯前端JS压缩的实现

本文删简自： www.zhangxinxu.com/wordpress/?…

一、功能体验

先看demo： 使用canvas在前端压缩图片并上传demo

如下截图：

点击文件选择框，我们不妨选一张尺寸比较大的图片，例如下面这种2M多的钓鱼收获照：

于是图片歘歘歘地传上去了：

此时我们点击最终上传完毕的图片地址，会发现原来2M多3000多像素宽的图片被限制为400像素宽了：

保存到本地会发现图片尺寸已经变成只有70K了：

以上就是图片前端压缩并上传demo的完整演示。

二、实现原理

要想使用JS实现图片的压缩效果，原理其实很简单，核心API就是使用 canvas 的 drawImage() 方法。

Canvas本质上就是一张位图，而 drawImage() 方法可以把一张大大的图片绘制在小小的Canvas画布上，不久等同于图片尺寸压缩了？

对于本案例的压缩，使用的5个参数的API方法：

context.drawImage(img, dx, dy, dWidth, dHeight);复制代码

各参数具体含义可以参见“ Canvas API中文文档-drawImage ”，这里不展开。

举例：

一张图片（假设图片对象是 img ）的原始尺寸是4000*3000，现在需要把尺寸限制为400*300大小，很简单，原理如下代码示意：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
// 核心JS就这个
context.drawImage(img,0,0,400,300);复制代码

把大图片画在一张小画布上，压缩就这么实现了，是不是简单的有点超乎想象。

三、如果想要上传或下载？

如果想要上传图片或者下载图片，可以使用 canvas.toDataURL() 或者 canvas.toBlob() 方法先进行转换。

canvas.toDataURL(mimeType, qualityArgument)复制代码

canvas.toBlob(callback, mimeType, qualityArgument)复制代码

// canvas转为blob并上传
canvas.toBlob(function (blob) {
  // 图片ajax上传
  var xhr = new XMLHttpRequest();
  // 开始上传
  xhr.open("POST", 'upload.php', true);
  xhr.send(blob);    
});复制代码

更多关于toBlob()方法的信息可以参见“ Canvas API中文文档-toBlob() ”。

一旦有了可传输的图像数据，上传下载就好实现了。例如下载前端压缩好的图片，可以参考我上一篇在掘金发布的文章：“ 纯JS生成并下载各种文本文件或图片 ”。

四、总结

经过“图片→canvas压缩→图片”三步曲，我们完成了图片前端压缩功能。

以上，感谢阅读！