uniapp H5端与APP端压缩图片

首先创建一个compress.js文件(以下是文件中图片压缩方法)

/**
 * APP端图片压缩
 *  参数说明:
 *  img 图片url
 *  scale缩放比例 1-100
 *  callback 回调设置返回值 
*/
export function translateapp(img, scale, callback) {

		plus.io.resolveLocalFileSystemURL(img, (entry) => { //通过URL参数获取目录对象或文件对象
			entry.file((file) => { // 可通过entry对象操作图片 
				console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
				if (file.size > 504800) { //   如果大于500Kb进行压缩
					plus.zip.compressImage({ // 5+ plus.zip.compressImage 了解一下,有详细的示例
						src: img, //src: 压缩原始图片的路径    
						dst: img.replace('.png', 'yasuo.png').replace('.PNG',
								'yasuo.PNG').replace('.jpg', 'yasuo.jpg')
							.replace('.JPG', 'yasuo.JPG'),
						width: '40%', //dst: (String 类型 )压缩转换目标图片的路径,这里先在后面原始名后面加一个yasuo区分一下
						height: '40%', //width,height: (String 类型 )缩放图片的宽度,高度
						quality: scale, //quality: (Number 类型 )压缩图片的质量
						overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
						// format:'jpg'   //format: (String 类型 )压缩转换后的图片格式
					}, (event) => {
						console.log('压缩后图片信息:' + JSON.stringify(event)); 
						//返回压缩后的图片路径
						callback(event.target);
					}, function(err) {
						 console.log('Resolve file URL failed: ' + err.message);
					});
				} else { //else小于500kb跳过压缩,直接返回现有的src
					callback(img);
					
				}
			});
		}, (e) => { // 返回错误信息
			 console.log('Resolve file URL failed: ' + e.message);
		});
	
}
/**
 * H5端图片压缩
 *  参数说明:
 *  imgSrc 图片url
 *  scale缩放比例 0-1
 *  type 返回图片类型  默认blob 
 *  callback 回调设置返回值 
*/
export function translate(imgSrc, scale, type , 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;
		if(type == 'base64'){
			callback(base64);
		}else{
			var blob = base64ToBlob(base64); 
			var blobUrl = window.URL.createObjectURL(blob);//blob地址
			callback(blobUrl);
		}
	}
}
// base转Blob
export function base64ToBlob(base64) { 
	var arr = base64.split(','),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {
		type: mime
	});
}


之后在script标签中引用
在这里插入图片描述
然后在拍照或选择图片后调用

uni.chooseImage({
				    count: 6, //默认9
				    sizeType: [ 'original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
				    sourceType: ['camera'], //从相册选择 album
				    success: function (res) {
						
						//区分APP与H5不同端调用不同的方法
				    	// #ifdef APP-PLUS 
					    	/**
							 * APP端图片压缩
							 *  参数说明:
							 *  img 图片url
							 *  scale缩放比例 1-100
							 *  callback 回调设置返回值 
							*/
							 translateapp(res.tempFilePaths[0], 80, imgUrl => {
							    //打印压缩后返回的图片url
								 console.log(imgUrl );	
							 })
						// #endif

						// #ifdef H5
							/**
							 * H5端图片压缩
							 *  参数说明:
							 *  imgSrc 图片url
							 *  scale缩放比例 0-1
							 *  type 返回图片类型:base64、blob(默认blob)   
							 *  callback 回调设置返回值 
							*/
							translate(res.tempFilePaths[0], 0.7, ' ', imgUrl => {
								 //打印压缩后返回的图片url			
								  console.log(imgUrl );	
							})
						// #endif
					}
});
  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
UniApp H5可以使用HTML5的canvas标签来生成图片并保存到本地。具体实现步骤如下: 1. 在H5页面中,首先需要在template中添加一个canvas标签,用于绘制图片: ``` <template> <canvas id="myCanvas"></canvas> </template> ``` 2. 在script中,获取canvas元素,并使用canvas API进行绘制。例如,绘制一张红色的矩形: ``` <script> export default { mounted() { // 获取canvas元素 const canvas = document.getElementById('myCanvas') // 获取绘图上下文 const ctx = canvas.getContext('2d') // 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(0, 0, canvas.width, canvas.height) } } </script> ``` 3. 绘制完成后,可以将canvas元素转化为图片,并保存到本地。可以使用canvas.toDataURL()方法将canvas转化为base64格式的图片数据,然后创建一个a标签并设置其href属性为图片数据,再调用a标签的click()方法触发下载。例如: ``` <script> export default { mounted() { // 获取canvas元素 const canvas = document.getElementById('myCanvas') // 获取绘图上下文 const ctx = canvas.getContext('2d') // 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(0, 0, canvas.width, canvas.height) // 将canvas转化为base64格式的图片数据 const imgData = canvas.toDataURL('image/png') // 创建a标签并设置href属性为图片数据 const link = document.createElement('a') link.href = imgData // 设置下载文件名 link.download = 'myImage.png' // 触发下载 link.click() } } </script> ``` 通过以上步骤,就可以在UniApp H5使用canvas生成图片并保存到本地了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值