H5图片压缩

最新推荐文章于 2024-03-27 14:47:43 发布

ces_test

最新推荐文章于 2024-03-27 14:47:43 发布

阅读量313

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45610622/article/details/129322551

版权

该代码段展示了一个JavaScript函数，用于压缩图片并返回Base64编码的压缩后图片。函数接受图片源、压缩比例和回调函数作为参数，利用HTML5的canvas进行图片压缩。压缩后的图片以base64格式传递给回调函数，然后使用uni.uploadFile接口上传到指定URL。

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

// 图片压缩方法
			translate(imgSrc, scale, callback) {
				var img = new Image();
				img.src = imgSrc;   //可以是临时路径
				img.onload = function() {
					var that = this;
					var h = that.height; // 默认按比例压缩
					var w = that.width;
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');
					var width = document.createAttribute("width");
					width.nodeValue = w;
					var height = document.createAttribute("height");
					height.nodeValue = h;
					canvas.setAttributeNode(width);
					canvas.setAttributeNode(height);
					ctx.drawImage(that, 0, 0, w, h);
					var base64 = canvas.toDataURL('image/jpeg', scale); //压缩比例
					canvas = null;
					callback(base64);
				}
			},

可以传入临时路径，相对路径，网络路径的图片进行压缩，最后返回base64格式的图片

this.translate(temp, 0.8, async imgURL => {
// 上传图片
    await uni.uploadFile({
		url: that.uploadFileUrl,
		filePath: imgURL,//压缩后的图片路径  base64格式
		name: that.fileKeyName,
		header: that.header,
		success: res => {
			// 上传完成后处理
			}})
	})