- 网站精华
图片转换canvas压缩上传，减少服务器存储压力
简介 图片压缩后上传，大大减少了图片大小对轻量服务器来说是很好的福音。
<h2><strong><s>// 图片压缩</s></strong></h2><h2><strong><s>const imgCompress = (path, obj, callback, index) => { //path是指上传的图片，obj是压缩的品质，越低越模糊</s></strong></h2><h2><strong><s> // let self = this; //这里的this 是把vue的实例对象指向改变为self</s></strong></h2><h2><strong><s> let img = new Image();</s></strong></h2><h2><strong><s> img.src = path.src;</s></strong></h2><h2><strong><s> img.onload = function() {</s></strong></h2><h2><strong><s> let that = this; //这里的this 是把img的对象指向改变为that</s></strong></h2><h2><strong><s> var w = that.width,</s></strong></h2><h2><strong><s> h = that.height,</s></strong></h2><h2><strong><s> scale = w / h;</s></strong></h2><h2><strong><s> w = obj.width || w;</s></strong></h2><h2><strong><s> h = obj.height || (w / scale);</s></strong></h2><h2><strong><s> let quality = 0.7; // 默认图片质量为0.7</s></strong></h2><h2><strong><s> // 生成canvas</s></strong></h2><h2><strong><s> let canvas = document.createElement('canvas');</s></strong></h2><h2><strong><s> let ctx = canvas.getContext('2d');</s></strong></h2><h2><strong><s> // 创建属性节点</s></strong></h2><h2><strong><s> let anw = document.createAttribute('width');</s></strong></h2><h2><strong><s> anw.nodeValue = w; // nodeValue 属性根据节点的类型设置或返回节点的值</s></strong></h2><h2><strong><s> let anh = document.createAttribute('height');</s></strong></h2><h2><strong><s> anh.nodeValue = h;</s></strong></h2><h2><strong><s> canvas.setAttributeNode(anw); // setAttributeNode() 方法用于添加新的属性节点</s></strong></h2><h2><strong><s> canvas.setAttributeNode(anh);</s></strong></h2><h2><strong><s> ctx.drawImage(that, 0, 0, w, h);</s></strong></h2><h2><strong><s> // 图像质量</s></strong></h2><h2><strong><s> if(obj.quality && obj.quality <= 1 && obj.quality > 0) {</s></strong></h2><h2><strong><s> quality = obj.quality;</s></strong></h2><h2><strong><s> }</s></strong></h2><h2><strong><s> // quality值越小，所绘制出的图像越模糊</s></strong></h2><h2><strong><s> let base64 = canvas.toDataURL('image/jpeg', quality);</s></strong></h2><h2><strong><s> callback(base64, index);</s></strong></h2><h2><strong><s> };</s></strong></h2><h2><strong><s>};</s></strong></h2><h2><strong><s>//将base64码转化为file（Blob）</s></strong></h2><h2><strong><s>//此处函数对压缩后的base64经过处理返回{size: "", type: ""}</s></strong></h2><h2><strong><s>const convertBase64UrlToBlob = (urlData) => {</s></strong></h2><h2><strong><s> var arr = urlData.split(','),</s></strong></h2><h2><strong><s> mime = arr[0].match(/:(.*?);/)[1],</s></strong></h2><h2><strong><s> bstr = atob(arr[1]),</s></strong></h2><h2><strong><s> n = bstr.length,</s></strong></h2><h2><strong><s> u8arr = new Uint8Array(n);</s></strong></h2><h2><strong><s> while(n--) {</s></strong></h2><h2><strong><s> u8arr[n] = bstr.charCodeAt(n);</s></strong></h2><h2><strong><s> }</s></strong></h2><h2><strong><s> return new Blob([u8arr], {type:mime});</s></strong></h2><h2><strong><s>};</s></strong></h2><h2><br></h2><h2><strong><s>export {</s></strong></h2><h2><strong><s> imgCompress,</s></strong></h2><h2><strong><s> convertBase64UrlToBlob</s></strong></h2><h2><strong><s>}</s></strong></h2><h2><br></h2><h2><br></h2><h2><strong><s>用法实例</s></strong></h2><h2><br></h2><h2><strong><s>import { imgCompress, convertBase64UrlToBlob } from '~/utils/imgCompress';</s></strong></h2><h2><strong><s> /**</s></strong></h2><h2><strong><s> *@param: e >> 点击事件</s></strong></h2><h2><strong><s> *@description: 图片压缩</s></strong></h2><h2><strong><s> *@author: Mister Wang</s></strong></h2><h2><strong><s> *@date: 2020-12-21 22:25:05</s></strong></h2><h2><strong><s> */</s></strong></h2><h2><strong><s> readFile(e) {</s></strong></h2><h2><strong><s> let file = e.target.files[0];</s></strong></h2><h2><strong><s> if (!chkFormat(file['type'], 'typeFile')) { //判断上传文件格式</s></strong></h2><h2><strong><s> return this.$alert(this.$t("上传的图片格式不正确，请重新选择"));</s></strong></h2><h2><strong><s> }</s></strong></h2><h2><strong><s> // 做图片压缩用；</s></strong></h2><h2><strong><s> let reader = new FileReader();</s></strong></h2><h2><strong><s> let img = new Image();</s></strong></h2><h2><strong><s> let self = this;</s></strong></h2><h2><strong><s> reader.readAsDataURL(file); //转成base64</s></strong></h2><h2><strong><s> reader.onload = function(e){</s></strong></h2><h2><strong><s> file.src = this.result;</s></strong></h2><h2><strong><s> img.onload = function() {</s></strong></h2><h2><strong><s> let width = img.width;</s></strong></h2><h2><strong><s> let height = img.height;</s></strong></h2><h2><strong><s> file.width = width;</s></strong></h2><h2><strong><s> file.height = height;</s></strong></h2><h2><strong><s> };</s></strong></h2><h2><strong><s> // 判断图片的大小，超过512K进行压缩</s></strong></h2><h2><strong><s> if(file.size / 1024 > 128) {</s></strong></h2><h2><strong><s> imgCompress(file, {quality: 0.2}, self.callback); // 回调执行图片上传操作</s></strong></h2><h2><strong><s> }else{</s></strong></h2><h2><strong><s> // 直接上传</s></strong></h2><h2><strong><s> self.uploadFile(file);</s></strong></h2><h2><strong><s> }</s></strong></h2><h2><strong><s> };</s></strong></h2><h2><strong><s> },</s></strong></h2><h2><strong><s> /**</s></strong></h2><h2><strong><s> *@param: base64Codes >> base64码</s></strong></h2><h2><strong><s> *@description: 压缩后回调,将base64码转化为file（Blob）</s></strong></h2><h2><strong><s> *@author: Mister Wang</s></strong></h2><h2><strong><s> *@date: 2020-12-21 22:24:08</s></strong></h2><h2><strong><s> */</s></strong></h2><h2><strong><s> callback(base64Codes) {</s></strong></h2><h2><strong><s> let bl = convertBase64UrlToBlob(base64Codes);</s></strong></h2><h2><strong><s> this.uploadFile(bl);</s></strong></h2><h2><strong><s> },</s></strong></h2><h2><strong><s> /**</s></strong></h2><h2><strong><s> *@param: file >> 图片文件</s></strong></h2><h2><strong><s> *@description: 上传图片</s></strong></h2><h2><strong><s> *@author: Mister Wang</s></strong></h2><h2><strong><s> *@date: 2020-12-21 22:26:07</s></strong></h2><h2><strong><s> */</s></strong></h2><h2><strong><s> uploadFile(file) {</s></strong></h2><h2><strong><s> let formData = new FormData();</s></strong></h2><h2><strong><s> let jpg = file.type.split('/');</s></strong></h2><h2><strong><s> formData.append('file', file, Date.parse(new Date()) + '.' + jpg[1]);</s></strong></h2><h2><strong><s> uploadImg(formData).then(res => {</s></strong></h2><h2><strong><s> if (res.code === 200) {</s></strong></h2><h2><strong><s> this.pic = config.baseUrl + res.data;</s></strong></h2><h2><strong><s> }</s></strong></h2><h2><strong><s> })</s></strong></h2><h2><strong><s> },</s></strong></h2>
分享到：
转载：
喜欢 1
收藏
暂无评论信息