当前位置：首页 > news >正文

用canvas对图片压缩

news 2024/10/27 22:51:24

用canvas对图片进行压缩

	// 使用canvas对图片进行压缩// 创建canvas元素,设置大小，环境let canvas = document.createElement('canvas') canvas.width = XXXcanvas.height = XXXlet ctx = canvas.getContext('2d') // 绘制图形，参数: 要绘制的图形，画布的起始位置，绘制图形的大小ctx.drawImage(image , 0,0,widht ,height) // 压缩图形为base64数据 参数：压缩图片的格式， 图片的质量（0-1）let data = canvas.toDataURL('image/png',0.8)

前端获取上传文件内容的方法： new FileReader()

	input.addEventListener('change' , (e) => {// input 上传的文件可以在target的files数组中获取到，这里直接结构出来const [file] = e.target.fileslet reader = new FileReader()// 执行读取文件内容的方法，执行后，reader实例中的result属性就可以获取到文件的base64字符串reader.readAsDataURL(file)// 成功读取文件后回出发load事件reader.onload = (e)=> {// 这个e指的是reader实例let base64 = e.target.result// 定义压缩方法compress(base64)}})

整体代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- input 上传文件类型，accept限制文件格式 --><input type="file" id="input" accept="image/*">
</body>
<script>input.addEventListener('change', (e) => {console.log(e)const [file] = e.target.files // 获取上传的文件对象const reader = new FileReader() // 读取文件数据，这里主要获取的图片的base64编码reader.readAsDataURL(file) // 执行此方法后，实例的result中存储当前文件的 base64编码// 文件读取完成后触发reader.onload = async (e) => {const data = e.target.result // 获取base64// 绘制原本的图片，和压缩后的做比较const _imageCur = new Image()_imageCur.src = dataconst base64 = await comapre(data)// 绘制压缩后的图片const _image = new Image()_image.src = base64document.body.appendChild(_imageCur)document.body.appendChild(_image)}// 判断并计算图片需要缩放的比例，大小，并借助canvas来压缩图片，canvas.toDataURl()async function comapre(base64, maxHeight = 500, maxWeight = 500) {const { promise, resolve, reject } = Promise.withResolvers()console.log(promise, '29')let img = new Image()img.src = base64img.onload = () => {// 调用具体的计算规则方法，返回具体的格式let { isNeedCompress, radio, width, height } = getImageComputedSize({isNeedCompress: false,redio: 1,width: img.width,height: img.height,maxHeight,maxWeight})// 计算后根据isNeedCompress标识字段来判断是否需要改变==== 具体压缩的代码if (isNeedCompress) {let canvas = document.createElement('canvas')canvas.width = widthcanvas.height = heightconst ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, width, height) // 参数：要画的图片对象 ， canvas图片的起始坐标，图片的大小const data = canvas.toDataURL('image/png', 0.8) // 调用 canvas.toDataURL()压缩图片，获取的压缩后的base64编码，这里需要用到异步处理resolve(data)} else {resolve(base64)}}return promise}function getImageComputedSize(option) {let { isNeedCompress, radio, width, height, maxHeight, maxWeight } = option// 根据是横图还是竖图，决定使用长/宽来计算redioif (width > height) { // 横图if (width > maxWeight) {radio = maxWeight / widthheight = Math.round(height * radio)width = maxWeightisNeedCompress = true}} else { // 竖图if (height > maxHeight) {radio = maxHeight / heightheight = maxHeightwidth = Math.round(width * radio)isNeedCompress = true}}return {isNeedCompress, radio, width, height}}})
</script></html>