解决思路
1、file转换为img (base64当作src给img对象)
2、img对象画在canvas上
3、将canvas转为bolb对象(图片)
4、上传bolb文件
// 压缩前将file转换成img对象
function readImg(file) {
return new Promise((resolve, reject) => {
const img = new Image()
const reader = new FileReader()
reader.onload = function(e) {
img.src = e.target.result
}
reader.onerror = function(e) {
reject(e)
}
reader.readAsDataURL(file)
img.onload = function() {
resolve(img)
}
img.onerror = function(e) {
reject(e)
}
})
}
/**
* 压缩图片
*@param img 被压缩的img对象
* @param type 压缩后转换的文件类型
* @param mx 触发压缩的图片最大宽度限制
* @param mh 触发压缩的图片最大高度限制
*/
function compressImg(img, type, mx, mh) {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
const { width: originWidth, height: originHeight } = img
// 最大尺寸限制
const maxWidth =
前端上传图片(压缩)
最新推荐文章于 2024-07-20 21:41:21 发布
本文探讨了如何在前端使用JavaScript实现图片上传前的压缩处理,以减少数据传输量和提高用户体验。内容包括选择合适的文件读取API,调整图片尺寸,压缩质量控制,以及与后端交互的细节。
摘要由CSDN通过智能技术生成