jikeH5/components/w-compress/compress.js

/**
 * 图片压缩
 * @param {String} imgUrl  需要压缩的图片路径
 * @param {Object} self	必传，当前组件对象
 * @param {Object} options 压缩参数
 * 		width: 压缩到多宽，默认图片宽度(待优化，传入宽度，应计算高度)
 * 		height: 压缩到多高，默认图片高度
 * 		pixels: 压缩图片的最大分辨率，默认二百万
 * 		quality: 压缩质量，默认0.8
 * 		type: 获取的base64类型，默认jpg
 * 		base64: 是否返回base64，默认true(非H5有效)
 * @return {Promise}
 * 		reject
 * 			code
 * 				-1: 获取图片信息错误
 * 				-2: 极大可能创建图片对象出错(h5会出现，出现概率无限接近0)
 * 				-3: canvas转图片错误(小程序会出现)
 * 				-4: 图片转base64错误(小程序会出现)
 */

// 图片分辨率压缩
const calcImageSize = (res, pixels) => {
	let imgW, imgH
	imgW = res.width
	imgH = res.height
	
	let ratio
	if((ratio = imgW * imgH / pixels) > 1) {
		ratio = Math.sqrt(ratio)
		imgW = parseInt(imgW / ratio)
		imgH = parseInt(imgH / ratio)
	} else {
		ratio = 1
	}
	
	return { imgW, imgH }
}

const urlTobase64 = (url, type) => {
	return new Promise((resolve, reject) => {
		uni.getFileSystemManager().readFile({
			filePath: url,
			encoding: 'base64',
			success: res => {
				let base64 = res.data
				base64 = `data:image/${type};base64,${base64}`
				resolve(base64)
			}
		})
	})
}

const compress = (imgUrl, slef, options={}) => {
	/*************** 参数默认值 ***************/
	const MAX_PIXELS = 2000000	// 最大分辨率，宽 * 高 的值
	const MAX_QUALITY = 0.8	// 压缩质量
	const IMG_TYPE = 'jpg'
	const CANVAS_ID = 'compress_canvas'
	const BASE_64 = false
	
	return new Promise((resolve, reject) => {
		uni.getImageInfo({
			src: imgUrl,
			success: res => {
				let pixels = options.pixels || MAX_PIXELS
				let quality = options.quality || MAX_QUALITY
				let type = options.type || IMG_TYPE
				let canvasId = options.canvasId || CANVAS_ID
				let isBase64 = options.base64 || BASE_64
				
				let { imgW, imgH } = calcImageSize(res, pixels)
				let w = options.width || imgW
				let h = options.height || imgH
				// #ifdef H5
				type = type == 'jpg' ? 'jpeg' : type,
				// #endif
				
				// #ifndef H5
				type = type == 'png' ? 'png' : 'jpg',
				// #endif
				console.log(`%c 宽: ${w} %c 高: ${h} %c 分辨率: ${w * h} %c 质量: ${quality} %c 类型: ${type}`, 'color:#f00', 'background-color:#f60;color:#fff', 'color:#F00', 'background-color:#f60;color:#fff', 'color:#F00')
				
				// #ifdef H5
				let img = new Image()
				img.src = res.path
				img.onload = () => {
					const canvas = document.createElement('canvas')
					const ctx = canvas.getContext('2d')
					canvas.width = w
					canvas.height = h
					let drawW = w, drawH = h
					
					ctx.drawImage(img, 0, 0, drawW, drawH)
					
					let base64 = canvas.toDataURL(`image/${type}`, quality)
					
					resolve(base64)
				}
				// #endif
				
				
				// 非h5
				// #ifndef H5
				slef.height = h
				slef.width = w
				
				slef.$nextTick(function() {
					let canvas = null
					if(!canvas) {
						canvas = uni.createCanvasContext(canvasId, slef)
					}
					canvas.drawImage(res.path, 0, 0, w, h)
					canvas.draw()
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: canvasId,
							x: 0,
							y: 0,
							width: w,
							height: h,
							destWidth: w,
							destHeight: h,
							fileType: type,
							quality: quality,
							success: file => {
								if(isBase64) {
									urlTobase64(file.tempFilePath, type)
										.then(res => {
											canvas = null
											resolve(res)
										})
										.catch(e => {
											reject({
												code: -4,
												msg: '图片转base64错误',
												data: e
											})
										})
								} else {
									resolve(file.tempFilePath)
								}
							},
							fail: e => {
								reject({
									code: -3,
									msg: 'canvas转图片错误',
									data: e
								})
							}
						}, slef)
					}, 500)
				})
				// #endif
			}
		})
	})
}

export default compress