// 堆代码 duidaima.com // 压缩前将file转换成img对象 function readImg(file:File) { return new Promise((resolve, reject) => { const img = new Image() const reader = new FileReader() reader.onload = function(e:any) { img.src = e.target.result } reader.onerror = function(e) { reject(e) } reader.readAsDataURL(file) img.onload = function() { resolve(img) } img.onerror = function(e) { reject(e) } }) }这里使用 promise 来设计生成图片数据的方法, 接下来我们看看核心的图片压缩源码:
/** * 压缩图片 * @param img 被压缩的img对象 * @param type 压缩后转换的文件类型 * @param mx 触发压缩的图片最大宽度限制 * @param mh 触发压缩的图片最大高度限制 * @param quality 图片质量 */ function compressImg(img: any, type:string, mx: number, mh: number, quality:number = 1) { return new Promise((resolve, reject) => { const canvas = document.createElement('canvas') const context = canvas.getContext('2d') const { width: originWidth, height: originHeight } = img // 最大尺寸限制 const maxWidth = mx const maxHeight = mh // 目标尺寸 let targetWidth = originWidth let targetHeight = originHeight if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > 1) { // 宽图片 targetWidth = maxWidth targetHeight = Math.round(maxWidth * (originHeight / originWidth)) } else { // 高图片 targetHeight = maxHeight targetWidth = Math.round(maxHeight * (originWidth / originHeight)) } } canvas.width = targetWidth canvas.height = targetHeight context?.clearRect(0, 0, targetWidth, targetHeight) // 图片绘制 context?.drawImage(img, 0, 0, targetWidth, targetHeight) canvas.toBlob(function(blob) { resolve(blob) }, type || 'image/png', quality) }) }这里通过控制 canvas的宽高, 以及对 canvas 的 toBlob设置参数, 来实现自定义的图片压缩。
总结
以上就是关于如何用原生 javascript, 实现从图片上传到图片自定义压缩的完整方案。如果大家对代码又不理解的地方, 也可以在文末发表问题, 我会做对应的解答。