vue+elementUI(el-upload)图片压缩,默认同比例压缩操作_vue上传图片自动压缩资源-CSDN文库

132 浏览量 2020-11-19 22:46:41 上传评论收藏 64KB PDF 举报

资源推荐

资源详情

资源评论

vue+elementUI(el-upload)图片压缩图片压缩,默认同比例压缩操作默认同比例压缩操作

如下所示：

这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况，我们允许上传10M以内的图片由前端对图片进行压缩再传给

后台存储，结合elementUI的el-upload组件实现图片上传功能（简单来说就是用户是老大）

1、提取出压缩方法，放在公共方法、提取出压缩方法，放在公共方法.js文件里文件里

/** 图片压缩，默认同比例压缩

* @param {Object} fileObj

* 图片对象

* 回调函数有一个参数，base64的字符串数据

*/

export function compress(fileObj, callback) {

try {

const image = new Image()

image.src = URL.createObjectURL(fileObj)

image.onload = function() {

const that = this

// 默认按比例压缩

let w = that.width

let h = that.height

const scale = w / h

w = fileObj.width || w

h = fileObj.height || (w / scale)

let quality = 0.7 // 默认图片质量为0.7

// 生成canvas

const canvas = document.createElement('canvas')

const ctx = canvas.getContext('2d')

// 创建属性节点

const anw = document.createAttribute('width')

anw.nodeValue = w

const anh = document.createAttribute('height')

anh.nodeValue = h

canvas.setAttributeNode(anw)

canvas.setAttributeNode(anh)

ctx.drawImage(that, 0, 0, w, h)

// 图像质量

if (fileObj.quality && fileObj.quality <= 1 && fileObj.quality > 0) {

quality = fileObj.quality

}

// quality值越小，所绘制出的图像越模糊

const data = canvas.toDataURL('image/jpeg', quality)

// 压缩完成执行回调

const newFile = convertBase64UrlToBlob(data)

callback(newFile)

}

} catch (e) {

console.log('压缩失败!')

}

}

function convertBase64UrlToBlob(urlData) {

const bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte

// 处理异常,将ascii码小于0的转换为大于0

const ab = new ArrayBuffer(bytes.length)

const ia = new Uint8Array(ab)

for (let i = 0; i < bytes.length; i++) {

ia[i] = bytes.charCodeAt(i)

}

return new Blob([ab], { type: 'image/png' })

}

2、、el-upload上传组件上传组件

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38630091

粉丝: 7
资源: 875

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip