压缩图片1

最新推荐文章于 2023-12-18 13:14:42 发布

薄荷少冰

最新推荐文章于 2023-12-18 13:14:42 发布

阅读量178

点赞数

分类专栏： uniapp Vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_48121940/article/details/126020688

版权

Vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

uniapp

8 篇文章 0 订阅

订阅专栏

本文介绍了一种JavaScript方法，通过压缩图片保持在最大500x500分辨率内，根据原始图像的比例灵活调整压缩后的宽度和高度，确保在不失真的前提下减小文件大小。通过canvas实现并返回Base64编码或Blob对象。

摘要由CSDN通过智能技术生成

compressImage(path) {
//最大高度
const maxHeight = 500;
//最大宽度
const maxWidth = 500;
return new Promise((resolve, reject) => {
let img = new Image();
img.src = path;
img.onload = function () {
const originHeight = img.height;
const originWidth = img.width;
console.log(‘img.height’,img.height)
console.log(‘img.width’,img.width)
let compressedWidth = img.height;
let compressedHeight = img.width;
if ((originWidth > maxWidth) && (originHeight > maxHeight)) {
// 更宽更高，
if ((originHeight / originWidth) > (maxHeight / maxWidth)) {
// 更加严重的高窄型，确定最大高，压缩宽度
compressedHeight = maxHeight
compressedWidth = maxHeight * (originWidth / originHeight)
} else {
//更加严重的矮宽型, 确定最大宽，压缩高度
compressedWidth = maxWidth
compressedHeight = maxWidth * (originHeight / originWidth)
}
} else if (originWidth > maxWidth && originHeight <= maxHeight) {
// 更宽，但比较矮，以maxWidth作为基准
compressedWidth = maxWidth
compressedHeight = maxWidth * (originHeight / originWidth)
} else if (originWidth <= maxWidth && originHeight > maxHeight) {
// 比较窄，但很高，取maxHight为基准
compressedHeight = maxHeight
compressedWidth = maxHeight * (originWidth / originHeight)
} else {
// 符合宽高限制，不做压缩
}
// 生成canvas
let canvas = document.createElement(‘canvas’);
let context = canvas.getContext(‘2d’);
canvas.height = compressedHeight;
canvas.width = compressedWidth;
context.clearRect(0, 0, compressedWidth, compressedHeight);
context.drawImage(img, 100, 100, compressedWidth, compressedHeight);
let base64 = canvas.toDataURL(‘image/*’, 0.8);
resolve(base64)
// let blob = convertBase64UrlToBlob(base64);
// 回调函数返回blob的值。也可根据自己的需求返回base64的值
// resolve(blob)
}
})
},

upload(){
			let that  = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: async function (res) {
					console.log('res',res)
			that.imgUrl = await that.compressImage(res.tempFilePaths[0])
				}
			});
		},