前端图片压缩

知识点

canvas.toDataURL(type, encoderOptions) ： 将canvas 对象转化成base64 编码
type，图片格式；encoderOptions 图片质量

代码

<script setup>
import { ref } from 'vue';


let imgurl = ref('')
let pressimgurl = ref('')

// 图片压缩函数
const imgFn = (imgBase64 , quality , mimeType) =>{
  let canvas = document.createElement('canvas')
  let img = document.createElement('img')
  img.src = imgBase64
  img.onload = () =>{
    // 实际过程，根据业务需求计算相应的宽度
    canvas.width = 300
    canvas.height = 300
    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0, 300, 300)
    // canvas.toDataURL(type, encoderOptions) ： 将canvas 对象转化成base64 编码
    // type，图片格式；encoderOptions  图片质量
    let newImg = canvas.toDataURL(mimeType, quality/100)
    pressimgurl.value = newImg
    console.log(newImg)
  }


}





// 上传图片按钮
const fn = (e)=>{
  // console.log(e.target.files[0])
  let reader = new FileReader()
  reader.onload = () =>{
    console.log(reader.result) // 原始的base64 数据
    imgurl.value =  reader.result
    imgFn(reader.result, 90, 'image/png')
    // 压缩质量为90，越小越模糊
  }
  reader.readAsDataURL(e.target.files[0])
}

</script>

<template>
<h1>图片压缩</h1>
<input type="file" @change="fn"/>
<p>原图片预览</p><img  :style="{width: '300px',border:'2px solid blue'}" :src="imgurl"   />
<p>压缩图片预览</p><img  :style="{width: '300px',border:'2px solid red' }" :src="pressimgurl"   />
</template>