JS利用Canvas实现图片等比例裁剪、压缩

最近在做一个政务类的移动端H5项目，用户体量达百万级别，有一个模块中有上传图片反馈的功能，由于各个手机产商拍照的像素值的都不一样，后台去浏览这个图片的时候就出现大小不一的情况，另外有些图片并不需要上传原始尺寸，再加上大流量的情况下就造成了服务器资源不必要的浪费，于是就有了将上传图片压缩的需求

图像压缩原理
图像压缩有两种方式，目前写的方法是两者都支持且能够共同处理
1.图像尺寸裁剪，由大变小
2.尺寸不变，图片质量缩减

引用代码

if (!HTMLCanvasElement.prototype.toBlob) {Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {value: function(callback, type, quality) {var canvas = thissetTimeout(() => {var binStr = atob(canvas.toDataURL(type, quality).split(',')[1])var len = binStr.lengthvar arr = new Uint8Array(len)for (var i = 0; i < len; i++) {arr[i] = binStr.charCodeAt(i)}callback(new Blob([arr], { type: type || 'image/png' }))})}})
}
const compressionImage = ({ content, maxWidth = 2000, maxHeight = 2000, quality = 1 }) => {return new Promise(resolve => {const set = (fileContent, fileType, fileName) => {const canvasDOM = document.createElement('canvas')const canvasContext = canvasDOM.getContext('2d')const img = new Image()img.src = fileContentimg.onload = () => {let targetWidthlet targetHeightif (img.width > maxWidth && img.height > maxHeight) {const rate = Math.min(maxWidth / img.width, maxHeight / img.height)targetWidth = img.width * ratetargetHeight = img.height * rate} else if (img.width > maxWidth) {targetWidth = maxWidthtargetHeight = (maxWidth / img.width) * img.height} else if (img.height > maxHeight) {targetHeight = maxHeighttargetWidth = (maxHeight / img.height) * img.width} else {targetWidth = img.widthtargetHeight = img.height}canvasDOM.width = targetWidthcanvasDOM.height = targetHeightcanvasContext.drawImage(img, 0, 0, img.width, img.height, 0, 0, targetWidth, targetHeight)const url = canvasDOM.toDataURL(fileType, quality)const callback = blob => {resolve({ url, blob })}canvasDOM.toBlob(callback, fileType, quality)}}if (content instanceof File) {const fileReader = new FileReader()fileReader.readAsDataURL(content)fileReader.onload = e => {set(e.target.result, content.type, content.name)}} else if (typeof content === 'string') {const fileType =content.includes('data:image/png;base64') ? 'image/png': content.includes('data:image/gif;base64') ? 'image/gif' : 'image/jpeg'set(content, fileType, `file-${+new Date()}`)}})
}

调用方式

const { url, blob } = await compressionImage({content: 'base64', //图像base64或file文件maxWidth: 1000, //最大宽度maxHeight: 600, //最大高度quality: 0.7 //图像质量，1为100%，建议选值0.95以下，1输出后的图像较大
})
console.log('压缩后的base64内容', url)
console.log('压缩后的blob文件', blob)

结果查看
对图片的尺寸和质量都进行了压缩，原始图像306b，压缩后的图像86kb

JS利用Canvas实现图片等比例裁剪、压缩相关推荐

js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { ...
html验证码图片,js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随 ...
利用canvas下载图片，透明区默认变为黑色
问题:利用canvas下载图片,透明区默认变为黑色 HTML <canvas id="canvas"></canvas> <div style=&qu ...
uni-app 图片固定比例裁剪
官方demo里有图片自由比例裁剪的功能 ,所以这里直接拿来用 <template><view class="container"><view clas ...
php图片素描化,html5利用canvas实现图片转素描效果
本章给大家介绍html5如何利用canvas实现图片转素描效果.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 素描滤镜原理: 最基础的算法就是: 1.去色:(去色公式:gray = ...
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
JS使用canvas给图片打马赛克
简介利用canvas加载图片后,画布上的各像素的颜色(r,g,b)值来填充色块,达到马赛克效果. 效果图代码 html <canvas id="canvas" data- ...
JS实现Canvas中图片淡出效果_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>实现C ...
利用js结合canvas给图片打马赛克
效果演示什么是canvas? <canvas> 元素用于图形的绘制,只是图形容器. 元素本身并没有绘制能力,您必须使用js脚本来绘制图形. getContext() 方法可返回一个对象, ...

JS利用Canvas实现图片等比例裁剪、压缩

JS利用Canvas实现图片等比例裁剪、压缩相关推荐

最新文章

热门文章