前端图片压缩优化工具conversion

image-conversion 是一个简单易用的 JS 图片转换工具，提供了多种 Image、Canvas、File 和 dataURL 之间的转换方法。

另外，image-conversion 可以指缓梁定大小来压缩图片。

1、将图像压缩到 200kb：

2、以 0.9 的质量压缩图像

image-conversion 提供了多种方山顷法来实现 Image、Canvas、File 和 dataURL 之间的转换，如下：

1、imagetoCanvas(image[, config]) {Promise(Canvas)}

将图像对象转换为画布对象。

2、dataURLtoFile(dataURL[, type]) {Promise(Blob)}

将 dataURL 字符串转换为 File(Blob) 对象，相当于把画布的内容转换成blob，type可以设置最终图片的格式。

type的值可以为："image/png", "image/jpeg", "image/gif"

3、compress(file, config) {Promise(Blob)}

压缩文件（Blob）对象。

4、compressAccurately(file, config) {Promise(Blob)}

根据大小压缩文件（Blob）对象。

5、canvastoDataURL(canvas[, quality, type]) {Promise(string)}

将 Canvas 对象转换为 dataURL 字符串，该方法可以进行压缩。

6、canvastoFile(canvas[, quality, type]) {Promise(Blob)}

将 Canvas 对象转换为 Blob 对象，此方法可以进行压缩。

7、dataURLtoImage(dataURL) {Promise(Image)}

将 dataURL 字符串扰唯运转换为图像对象。

8、downloadFile(file[, fileName])

下载图片到本地。

9、filetoDataURL(file) {Promise(string)}

将 File(Blob) 对象转换为 dataURL 字符串。

10、urltoBlob(url) {Promise(Blob)}

通过图像 url 加载所需的 Blob 对象。

11、urltoImage(url) {Promise(Image)}

通过图片 url 加载所需的 Image 对象。

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧

 let zlib = require("pako")//引入

//压缩方法 用来将大数据压缩后在传给后端

Vue.prototype.zip = function (str) {

            /枣戚/encodeURIComponent 将字符串作为URI组件进行编码

            //zlib.gzip() 将编码后的数据进行压缩，string类型

            let binaryString = zlib.gzip(encodeURIComponent(str), {

                to: "string"

            })

            //btoa()将压缩后的数据变成base64格式

            return btoa(binaryString)

        },

//解压缩方法，前端接受后端大数据后，先解压缩在进行后面的逻辑

        Vue.prototype.unzip = function (b64Data) {

            //atob()将base64格式数据转化成压缩数据

            let strData = atob(b64Data)

            //split()方法用于把一个字符串分割成字符串数组

            //通过map函数进行遍历，并对每一个进行 Unicode 编码

            let charData = strData.split("").map(function (x) {

   芹拿             //charCodeAt() 方法可返回指定位置的字符的 Unicode 编码

                return x.charCodeAt(0)

            })

            //Uint8Array 8 位无符号整数值的类型化数组

            let binData = new Uint8Array(charData)

            // console.log(binData)

            //解压缩 充气

            let data = zlib.inflate(binData)

            //fromCharCode 将 Unicode 编码转为一个字符:

            // console.log(data)

           //分片解压缩，防止数据量过大，浏览器栈溢出报错

            let chunk = 8 * 1024

            let res = ""

            let dataLength = data.length / chunk

            let i

            for (i = 0 i < dataLength i++) {

                res += String.fromCharCode.apply(

                    null,

                    data.slice(i * chunk, (i + 1) * chunk)

                )

          凳首陵  }

            res += String.fromCharCode.apply(null, data.slice(i * chunk))

            //decodeURIComponent() 对 encodeURIComponent() 函数编码的 URI 进行解码

            strData = res

            return decodeURIComponent(strData)

        },

2021-02-20：

    问题更新：最新客户在使用的过程中，发现页面展示会出现莫名其妙的“+”。

    对此，我们进行了一番查询，发现问题原因如下：后端在将数据压缩的过程中，正常情况下会将数据中的“+”号编码成%2B，同时会将“ 空格 ”编码成“%20”，那么前端接收以后，就可以进行解码。

    但是，我们发现数据中的“+”会被正常编码，但是空格却不会，而是编码成了“+”.那么，前端接收以后在解码的过程中，就无法对“+”进行解码，就会造成显示和真实数据不一致。

解决方案：后端在压缩完成后，再将所有的“+”编码替换成“%20”，这样，在前端接收数据后，就能将数据正常解码并显示。

最近公司有个需求，就是上传照片时需要先压缩。

其中上传原理是用ajax上传formdata数据，压缩是瞎宏采用canvas进行处理。

利用canvas处理Image对象调整改神让像素尺寸，输出base64格式，再将base64格式转换为blob对象，再放进formdata对象

上传核局文件用formdata，图像处理用canvas。

---