1
/** * 压缩图片 * base64 : 图片base64字符串 * w : 图片宽高最大值 * callback : 回调函数 * quality : 压缩系数0-1之间, 默认0.92 * limit : 压缩限制字符串长度单位(KB) * 使用: * import { compressBase64 } from '@/utils' * compressBase64(原base64, 1000, async (base64) => { * console.log(base64.length) * }) */ export function compressBase64 (base64, w, callback, quality = 0.92, limit = 500) { let newImage = new Image() newImage.src = base64 newImage.setAttribute('crossOrigin', 'Anonymous') let imgWidth, imgHeight newImage.onload = function () { imgWidth = this.width imgHeight = this.height let canvas = document.createElement('canvas') let ctx = canvas.getContext('2d') if (Math.max(imgWidth, imgHeight) > w) { if (imgWidth > imgHeight) { canvas.width = w canvas.height = w * imgHeight / imgWidth } else { canvas.height = w canvas.width = w * imgWidth / imgHeight } } else { canvas.width = imgWidth canvas.height = imgHeight } ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(this, 0, 0, canvas.width, canvas.height) // 压缩语句 // let base64 = canvas.toDataURL('image/jpeg', quality) // 如想确保图片压缩到自己想要的尺寸,500字符长度以下,请加以下语句, quality初始值根据情况自定 let times = 0 while (base64.length / 1024 > limit) { // quality -= 0.01 base64 = canvas.toDataURL('image/jpeg', quality) // 限制3次,防止死循环 if (times >= 3) { console.log('compress times >= 3, break') break } times = times + 1 } // 回调函数返回,否则无法及时拿到该值 callback(base64) } }