前端canvas图片压缩原理解析

前提概要：

最近公司项目中，有个用户手机自己拍照上传的的需求，需要用户在wap页面中调起相机拍照上传。前端通过input[file] capture="camera" 成功的调起了摄像机，看起来好像一切都ok了，可是后来实际测试中发现，iphone X + 像素比较高,排出来的照片有的高达十几M，而接口控制最多上传5M,造成上传失败。很显然让用户自己去压缩是很不现实的，用户体验非常差。这个场景下前端图片压缩就不得不摆到了桌面。后来github上找到一个插件compressorjs ，经过试验后发现可以完美实现。由于当时急着完成功能，并没有对其原理做过多的研究，今天在项目上完线后的空余时间对前端的图片压缩做些研究。大致弄清楚了该插件的压缩原理。

图片压缩上传流程：

通过上图我们可以看到，实际压缩是通过canvas的api toBlob 来进项压缩的，这里有几个关键词：createObjectURL，canvas.toBlob,Blob , FormData ,，toDataURl我们来依次解释下。

URL.createObjectURL

改接口将文件转换成一个页面上可以显示的图片地址，利用这个地址我们可以将改图片文件画到canvas中。

canvas.toBlob （重点）

调用这个api 可以将canvas画布中的图片进行指定质量的压缩，并转化成Blob对象返回给回调函数，我们来看一下它的用法

/*
* callback 回调函数，返回处理后的Blob
* type   图片类型,默认格式为'image/png'
* quality 图片压缩的质量（0-1）
*/
canvas.toBlob(callback, type, quality);

* callback 回调函数，返回处理后的Blob

* type 图片类型,默认格式为'image/png'

* quality 图片压缩的质量（0-1）

canvas.toBlob(callback, type, quality);

通过设置quality参数我们可以设置图片压缩的程度。通过callback我们可以得到处理后的文件。然后在callback中处理上传操作

拓展问题：这个图片压缩的原理是啥？这个压缩影响图片质量么

图片压缩原理，简单来说，通过算法减少一张图片上的颜色差异，牺牲图片画质。比如紧挨着的颜色相近的四个像素的颜色信息压缩前大概占16个字节，压缩后变成一个颜色就能减少近4倍。quality用来控制色差的力度，值越小力度越大，颜色相差较大的两个像素也会被处理，自然被压缩后文件就越小，画质就越烂，所以是会影响图片质量的，官方文档中也有说到。

传送门：官方文档

canvase.toDataURL

canvase.toDataURL 和 canvas.toBlob 不同的是toBlob会创建一个Blob对象，而toDataURL返回一个包含图片展示的dataURI ，可以将图片压缩成 base64格式，具体用法可看官方文档

传送门：官方文档

Blob

那么Blob是什么呢？blob是一个二进制大对象，是一个可以储存二进制文件的容器。在Web领域，Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob，并扩展它用于支持用户系统的本地文件。简单来说 Blob是个二进制，所以再服务端是通用的，所有可以无阻隔接受。

拓展问题：base64 格式的文件可以上传么?

可以上传，需要后台支持 https://cnodejs.org/topic/4f939c84407edba2143c12f7?spm=a2c6h.13066369.0.0.61567ec0NqhHYH

传送门：官方文档

FormData

在实际操作中发现使用json格式上传并没有成功，使用formdata才可用上传

var formData = new FormData();        formData.append('file', newFile, newFile.name);                $.ajax({                url: 'url',//后台文件上传接type: 'POST',                data: formData,                processData: false,                contentType: false,                success: function (result) {                    console.log('上传成功',result)                }
})

拓展问题：是否只能使用formdata上传文件？是接口限制了还是html规范就是这样？

可以使用 input ,FormData.,和base64等方式上传

https://www.cnblogs.com/soraly/p/8441589.html

代码展示

下面写一个最简单的示例来说明是如何压缩的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片压缩</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body><input type="file" onChange="change(this.files)"><canvas id="canvas" width="100px" height="100px"></canvas><script>function change(files){console.log('原始大小=',files[0].size) //12Mvar that = this;var img = new Image();img.src = URL.createObjectURL(files[0]);//将文件转成urlimg.onload = function(){ //必须等到图片load之后才能画到canvas中var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");canvas.width = img.widthcanvas.height = img.height ctx.drawImage(img, 0, 0);canvas.toBlob(function(blob){  //压缩图片console.log('压缩后的图',blob.size);var newFile = new File([blob], files[0].name, { type: blob.type });var formData = new FormData();formData.append('file', newFile, newFile.name);$.ajax({url: 'url',//后台文件上传接口type: 'POST',data: formData,processData: false,contentType: false,success: function (result) {console.log('上传成功',result)}})}, "image/jpeg", 0.6);}}</script>
</body>
</html>

以上就是今天调研的结果

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

https://segmentfault.com/q/1010000009851120

https://blog.csdn.net/weixin_34114823/article/details/91393062

https://blog.csdn.net/longlc123/article/details/81135616

前端canvas图片压缩原理解析相关推荐

PNG 图片压缩原理解析
原文地址见文末,感谢原作者. Table of Contents 背景什么是PNG PNG类型 PNG图片数据结构 PNG的压缩压缩(Compression) 结语背景今天凌晨一点,突然有个人 ...
PNG图片压缩原理解析--屌丝的眼泪
今天看到一篇文章,本以为是技术硬核,却发现是杯情感鸡汤~,转一下. 链接: https://segmentfault.com/a/1190000018557449 背景今天凌晨一点,突然有个人加我的 ...
png图片压缩原理解析
什么是PNG PNG的全称叫便携式网络图型(Portable Network Graphics)是目前最流行的网络传输和展示的图片格式,原因有如下几点: 无损压缩:PNG图片采取了基于LZ77派生算法 ...
可能是最详细的Android图片压缩原理分析（二）—— 鲁班压缩算法解析
本篇文章已授权微信公众号guolin_blog(郭霖)独家发布稀土掘金链接前言通过上一篇,我们了解了一些关于图片压缩的基础知识,这篇文章我们主要讲解一下鲁班压缩的算法逻辑,很多博客都是从Gith ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( Bitmap_compress 方法解析 | Skia 二维图形库 | libjpeg 函数库 | libpng 函数库 )
文章目录一. 图片质量压缩方法二. Skia 二维图形库三. libjpeg.libpng 函数库引入在博客 [Android 内存优化]图片文件压缩 ( Android 原生 API 提供的 ...
可能是最详细的Android图片压缩原理分析（一）—— Android图片压缩必备基础知识
本篇文章已授权微信公众号guolin_blog(郭霖)独家发布稀土掘金链接前言: 最近在研究图片压缩原理,看了大量资料,从上层尺寸压缩.质量压缩原理到下层的哈夫曼压缩,走成华大道,然后去二仙桥,全 ...
【Android 内存优化】Android 原生 API 图片压缩原理 ( 哈夫曼编码开关 | 哈夫曼编码原理 | libjpeg-turbo 函数库 )
文章目录一. 哈夫曼编码开关二. 哈夫曼编码原理三. libjpeg-turbo 函数库四. libjpeg-turbo 函数库下载 [Android 内存优化]图片文件压缩 ( Androi ...
vue中前端实现图片压缩 file文件
项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法将图片压缩的方法写到这 ...
python图像切割成多边形_python通过opencv实现图片裁剪原理解析
这篇文章主要介绍了python通过opencv实现图片裁剪原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下图像裁剪的基本概念 : 图像裁剪是 ...
几个用于前端canvas图片查看编辑的js插件
几个用于前端canvas图片查看编辑的js插件 1 tui.image-editor 2 Konva 3 AlloyImage 4 zwibbler 5 canvasPS 6 Photo Editor ...

前端canvas图片压缩原理解析

前端canvas图片压缩原理解析相关推荐

最新文章

热门文章