图片转换canvas压缩上传,减少服务器存储压力
分类专栏: Javascript&
简介 图片压缩后上传,大大减少了图片大小对轻量服务器来说是很好的福音。
<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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
-
git:如何管理本机的多个ssh密钥(多个远程仓库账号)
如果我们电脑上已经存在了一个ssh key,那么我们需要在我们电脑上生成第二个你想在本电脑上使用的id_rsa,使用命令:ssh-keygen -t rsa -C "你的github账号"。
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:212篇
- 建站时间:已运行1107天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据