前端如何压缩图片质量

开篇语
惊人，后端竟对前端提出这样的要求
常用的压缩方法
Canvas压缩图片的重要知识点
demo下载

开篇语

在我的博客，“生活”这模块里，经常需要上传图片。这些图片一般都是我用手机拍摄的，图片质量一般在2-5M左右。所以，我会在图片上传后，使用tinypng接口进行图片压缩。这样，显示的图片会在几百KB左右，点击大图预览才会加载原图。

惊人，后端竟对前端提出这样的要求

就在前两个月，在团队项目里。甲方提出了一个需求，要求对上传的图片进行压缩。在我的思维逻辑里，压缩工作是在图片上传后，后端去进行处理的。
经过小组的讨论分析，后端想要把图片质量压缩的工作放在前端去进行处理，这样可以减少请求时间，客户体验感会更好。当时的有点懵逼，前端还能去处理图片的压缩？

常用的压缩方法

图片上传到阿里云或者七牛云，云端会压缩图片；
后端对图片尺寸大小进行压缩，比如tinypng等接口，都可以完成，但压缩时间很久；
前端用Canvas作为媒介压缩图片；

显然团队的项目更适用于第三种方法。而且网上一大堆相关的资料。

Canvas压缩图片的重要知识点

将file对象转成Data URL；
使用canvas对图片进行缩放，从而达到压缩质量的目的；
将canvas元素所展示的图片再次转换成Data URL；
最后把Data URL转成blob；

详细代码解释如下：

function compress (file,callback) {var reader = new FileReader();// 将file 对象转成 Data URLreader.readAsDataURL(file);reader.onload = function(e) {// 新建一个img 标签（还没嵌入DOM节点)var image = new Image();image.src = e.target.result;image.onload = function() {// canvas.getContext 进行宽高的改变，从而达到压缩质量的目的var canvas      = document.createElement('canvas'), context     = canvas.getContext('2d');imageWidth  = 300,  // 压缩质量宽度imageHeight = 300,  // 压缩质量高度compactData = '';canvas.width  = imageWidth;canvas.height = imageHeight;context.drawImage(image, 0, 0, imageWidth, imageHeight);// 将canvas 元素所展示的图片再次转换成 Data URL// 到这已经压缩完成了compactData = canvas.toDataURL(file.type);// 最后把Data URL 转成 blobvar byteString, mimeString, u8arr, blob;if ( compactData.split(",")[0].indexOf("compactData") >= 0 ) {byteString = atob(compactData.split(",")[1]); } else{ byteString = unescape(compactData.split(",")[1]); }mimeString = compactData .split(",")[0] .split(":")[1] .split(";")[0]; u8arr      = new Uint8Array(byteString.length); for ( var i = 0; i < byteString.length; i++ ) { u8arr[i] = byteString.charCodeAt(i); } blob = new Blob([u8arr], { type: mimeString });   // 返回原file 对象、压缩后的file 对象、压缩后的 Data URLcallback && callback(file, blob, compactData);};};
};

在上述样例中，主要是经历了图片 -->canvas缩放压缩 --> 图片的过程。在图片压缩完成后，看个人所需，可以做不同的处理。例如将压缩后的图片显示在页面，作为略缩图，或者直接上传压缩图片。

但要注意的是，上传图片必须是blob对象，所以在压缩后，必须转换成blob对象才能进行上传。转换blob对象的方法好几种，原生的canvas也提供转换blob的方法。有兴趣可以去了解。

demo下载

前端压缩图片样例资源下载
样例地址：www.qiuzhipeng.com/resource/demo/compress.html)

前端如何压缩图片质量相关推荐

前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目
场景 1.vant框架上传组件-上传身份证两面图片需求并且压缩图片质量,非压缩长宽--商城项目 2.压缩图片质量大小-- 3.压缩逻辑因为是正反两面单独压缩执行,所以我这里使用 Promise.all ...
前端实现压缩图片的功能（vue-element）
前言: 随着现在手机像素,拍照功能越来越好,随之而来的是本地图片越来越大,那么如何更好的将本地图片上传到后端接口呢?这是后台管理系统常见的场景和头疼的问题,这里分享下个人的方法. 实现效果: 如下图所 ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
前端资源压缩合并maven插件之wro4j
前端资源压缩合并maven插件之wro4j 原文写于 2014-05-14 https://github.com/kuitos/kuitos.github.io/issues/5 参考文章:前端性能优 ...
移动前端—图片压缩上传实践
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
前端js压缩图片：compressionjs的使用
compressionjs <!DOCTYPE html> <html lang="zh"><head><title>前端图片压缩 ...
图片纯前端JS压缩的实现
一.功能体验先看demo:使用canvas在前端压缩图片并上传demo 如下截图: 点击文件选择框,我们不妨选一张尺寸比较大的图片,例如下面这种2M多的钓鱼收获照: 于是图片歘歘歘地传上去了: 此时 ...
android压缩图片质量,Android 图片质量压缩有关问题
Android 图片质量压缩问题本帖最后由 u013064347 于 2014-01-13 10:22:47 编辑网上看到一个图片质量压缩法,传入1M以内图片能正常压缩,但是传入2M多的图片就报内 ...

前端如何压缩图片质量

前端如何压缩图片质量

开篇语

惊人，后端竟对前端提出这样的要求

常用的压缩方法

Canvas压缩图片的重要知识点

demo下载

前端如何压缩图片质量相关推荐

最新文章

热门文章