谷歌开源图片压缩项目与VUE结合

官方git地址：GitHub - GoogleChromeLabs/squoosh: Make images smaller using best-in-class codecs, right in the browser.

不错的项目

1. 直接引入官方源码方式

GitHub - thangman22/frontend-image-encode: This is script and implementation of frontend image compression, convert, rotate, resize based on codecs in Google/Squoosh. All codecs are copy from the Squoosh repo without modifying. if you want to pre-process images before uploading them to the server, please use this repo for reference

GitHub - renzhezhilu/webp2jpg-online-demo: Here are some libraries about using the browser to do image processing (format conversion), and make the corresponding demo pages.这里收集了一些关于使用浏览器做图片处理（格式转换）的库，并制作了相应的演示页面。（在vue后台中成功引用）

压缩比例

在线例子：browser-image-conversion-dome

 

2. 自己封装的NPM包方式

GitHub - myeveryheart/squoosh-browser: An image compression tool run in browser while @squoosh/lib can not.

VUE完整示例

1. element ui upload组件

1 2 3 4 5 6 7 8 9 10 11 12

<el-form-item label="商品图片" prop="img">   <el-upload     class="avatar-uploader"     :action="`${baseUrl}/api/index/upload`"     :show-file-list="false"     :before-upload="beforeAvatarUpload"     :on-success="handleAvatarSuccess"   >     <img v-if="form.img" :src="form.img" class="avatar" />     <i v-else class="el-icon-plus avatar-uploader-icon"></i>   </el-upload> </el-form-item>

封装的方法

/utils/compressImg.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164

/**  * 图片压缩处理  * @author luwc  * @date 2022-10-02  * @returns {Promise<unknown>}  */ function loadJs(src) {   //'/static/js/squoosh/src/avif_enc.js'   // let src = '//res.xxxxx.com/h5/js/squoosh/avif_enc.js'   return new Promise((resolve, reject) => {     let script = document.createElement('script')     script.type = 'text/javascript'     script.src = src     document.body.appendChild(script)     script.onload = () => {       resolve()     }     script.onerror = () => {       reject()     }   }) } /**  *  * @param file  * @returns {Promise<unknown>}  */ function imgConver(file) {   // loadJs()   return loadJs('//res.xxxx.com/h5/js/squoosh/webp_enc.js').then(() => {     // 加载成功，进行后续操作     return new Promise((resolve, reject) => {       let _canvas = document.createElement('canvas')       let _img = new Image()       _img.src = window.URL.createObjectURL(file)       _img.onload = function () {         _canvas.setAttribute('width', this.width)         _canvas.setAttribute('height', this.height)         _canvas.getContext('2d').drawImage(this, 0, 0)         let data = _canvas           .getContext('2d')           .getImageData(0, 0, this.width, this.height)         webp_enc().then((webp_enc_wasm) => {           let avifImg = webp_enc_wasm.encode(             data.data,             this.width,             this.height,             {               quality: 75,               target_size: 0,               target_PSNR: 0,               method: 4,               sns_strength: 50,               filter_strength: 60,               filter_sharpness: 0,               filter_type: 1,               partitions: 0,               segments: 4,               pass: 1,               show_compressed: 0,               preprocessing: 0,               autofilter: 0,               partition_limit: 0,               alpha_compression: 1,               alpha_filtering: 1,               alpha_quality: 100,               lossless: 0,               exact: 0,               image_hint: 0,               emulate_jpeg_size: 0,               thread_level: 0,               low_memory: 0,               near_lossless: 100,               use_delta_palette: 0,               use_sharp_yuv: 0,             }           )           if (!avifImg || avifImg == null || avifImg == undefined) {             reject('自动压缩文件时，读取文件失败!')           } else {             let outImgBlob = new Blob([avifImg.buffer], {               type: 'image/avif',             })             resolve({               blob: outImgBlob,               url: URL.createObjectURL(outImgBlob),               size:                 (file.size / 1024).toFixed(1) +                 ' Kb -> ' +                 (outImgBlob.size / 1024).toFixed(1) +                 ' Kb',             })           }         })       }     })   }) } /**  * 大文件读取文件失败不知道为啥  * @param file  * @returns {Promise<unknown>}  */ function imgConverAvif(file) {   // loadJs()   return loadJs('//res.xxx.com/h5/js/squoosh/avif_enc.js').then(() => {     // 加载成功，进行后续操作     return new Promise((resolve, reject) => {       let _canvas = document.createElement('canvas')       let _img = new Image()       _img.src = window.URL.createObjectURL(file)       _img.onload = function () {         _canvas.setAttribute('width', this.width)         _canvas.setAttribute('height', this.height)         _canvas.getContext('2d').drawImage(this, 0, 0)         let data = _canvas           .getContext('2d')           .getImageData(0, 0, this.width, this.height)         avif_enc().then((avif_enc_wasm) => {           let avifImg = avif_enc_wasm.encode(             data.data,             this.width,             this.height,             {               minQuantizer: 33,               maxQuantizer: 63,               minQuantizerAlpha: 33,               maxQuantizerAlpha: 63,               tileColsLog2: 0,               tileRowsLog2: 0,               speed: 8,               subsample: 1,             }           )           if (!avifImg || avifImg == null || avifImg == undefined) {             reject('自动压缩文件时，读取文件失败!')           } else {             let outImgBlob = new Blob([avifImg.buffer], {               type: 'image/avif',             })             resolve({               blob: outImgBlob,               url: URL.createObjectURL(outImgBlob),               size:                 (file.size / 1024).toFixed(1) +                 ' Kb -> ' +                 (outImgBlob.size / 1024).toFixed(1) +                 ' Kb',             })           }         })       }     })   }) } module.exports = {   imgConver,   loadJs, }

在before_upload方法中处理

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import compressImg from '@/utils/compressImg' ... ... beforeAvatarUpload(file) {   this.fullscreenLoading = true   // 图片压缩   return compressImg.imgConver(file).then(     (outImg) => {       console.log(outImg)       console.log(typeof outImg.blob)       return outImg.blob     },     (error) => {       // 错误抛出来       this.$message.error(error)       this.fullscreenLoading = false       return reject(false)     }   ) },