利用canvas 降低图片画质

最新推荐文章于 2023-08-28 13:25:02 发布

玫瑰花开一片一片

最新推荐文章于 2023-08-28 13:25:02 发布

阅读量540

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/q515656712/article/details/128542085

版权

这段代码演示了如何通过创建Image对象，设置crossOrigin属性，然后在onload事件中利用Canvas进行等比例缩放和质量压缩，最后将处理后的图片转换为dataURL，以降低图片的画质和尺寸。scalingImage函数用于计算保持比例的缩放尺寸。

摘要由CSDN通过智能技术生成

降低画质：

list () { // 降低画质测试
      return this.imageList.map(item => {
        if (item.link) return item
        item.link = ''
        const vm = this
        let oImg = new Image()
        oImg.setAttribute('crossOrigin', 'anonymous')
        oImg.onload =  function () {
          // 等比例缩放scalingImage(原图宽度，原图高度， 希望最大宽度， 希望最大高度)
          const {width, height} = vm.scalingImage(this.width, this.height, 300, 800)
          let canvas = document.createElement('canvas')
          canvas.width = width
          canvas.height = height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(oImg, 0, 0, width, height)
          const src = canvas.toDataURL('image/png', 1) // 降低画质0 ~ 1 可选
          item.link = src
        }
        oImg.src = item.url
        return item
      })
    }

等比例缩放宽高尺寸：*此计算函数来源于网络

scalingImage (原图宽度，原图高度，希望最大宽度，希望最大高度)

scalingImage(imgWidth, imgHeight, containerWidth, containerHeight) {
        var containerRatio = containerWidth / containerHeight
        var imgRatio = imgWidth / imgHeight
    
        if (imgRatio > containerRatio) {
            imgWidth = containerWidth
            imgHeight = containerWidth / imgRatio
        } else if (imgRatio < containerRatio) {
            imgHeight = containerHeight
            imgWidth = containerHeight * imgRatio
        } else {
            imgWidth = containerWidth
            imgHeight = containerHeight
        }
    
        return { width: imgWidth, height: imgHeight }
    }