HTML5画布工件

如何解决HTML5画布工件

我创建了一个Vue组件，该组件将图像加载到画布中，并允许用户使用鼠标滚轮进行放大和缩小。图像分辨率为1260x1800，画布分辨率为427x610（保留长宽比）。

<template>
  <canvas
    ref="canvas"
    :width="width"
    :height="height"
    @mousedown.prevent.stop="onMouseDown"
    @mousemove.prevent.stop="onMouseMove"
    @mouseup.prevent.stop="onMouseUp"
    @mouseout.prevent.stop="onMouseOut"
    @mousewheel.prevent.stop="onMouseWheel"
  />
</template>

<script>
export default {
  name: 'MyZoomingCanvas',props: {
    src: {
      type: String,required: true
    },zoom: {
      type: Object,required: true,validator: zoom =>
        zoom &&
        zoom.hasOwnProperty('min') &&
        zoom.hasOwnProperty('max') &&
        zoom.hasOwnProperty('step') &&
        zoom.hasOwnProperty('scale')
    }
  },data() {
    return {
      img: null,isMouseDown: false,startX: null,startY: null,dx: 0,dy: 0,width: 427,height: 610
    }
  },watch: {
    'zoom.scale'() {
      this.draw()
    }
  },methods: {
    draw() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')

      ctx.clearRect(0,this.width,this.height)
      ctx.setTransform(
        this.zoom.scale,this.zoom.scale,((1 - this.zoom.scale) * this.width) / 2,((1 - this.zoom.scale) * this.height) / 2
      )

      ctx.drawImage(this.img,this.height)
    },loadImage(src) {
      return new Promise((resolve,reject) => {
        const img = new Image()
        img.addEventListener('load',() => resolve(img))
        img.addEventListener('error',err => reject(err))
        img.src = src
      })
    },onMouseDown({ clientX,clientY }) {
      this.startX = clientX
      this.startY = clientY

      this.isMouseDown = true
    },onMouseMove({ clientX,clientY }) {
      if (this.isMouseDown) {
        this.dx += clientX - this.startX
        this.dy += clientY - this.startY

        this.draw()

        this.startX = clientX
        this.startY = clientY
      }
    },onMouseUp() {
      this.isMouseDown = false

      this.dx = 0
      this.dy = 0
    },onMouseOut() {
      this.isMouseDown = false
    },onMouseWheel({ offsetX,offsetY,deltaY }) {
      this.dx = -offsetX
      this.dy = -offsetY

      this.$emit(
        'scale-change',Math.min(this.zoom.max,Math.max(this.zoom.min,this.zoom.scale - deltaY * this.zoom.step))
      )
    }
  },mounted() {
    this.loadImage(this.src).then(img => {
      this.img = img

      this.$nextTick(() => {
        this.draw()
      })
    })
  }
}
</script>

我注意到在某些情况下，图像会受到奇怪的伪影的影响，请看以下示例：https://jsfiddle.net/lmartini/b3hLr5ej/latest/

在该示例中，在放大时，我可以清楚地看到沿整个织物高度的一堆水平带，它们在某个缩放级别后消失了。

通过谷歌搜索，我相信这些伪像是由画布和图像之间的分辨率不匹配（所谓的 pixel-perfect 问题）以及内部浏览器的下采样算法引起的。 我尝试通过添加以下几行来提高画布的图像平滑质量，但它们根本没有任何区别（我的目标浏览器是Chrome）：

// ctx is the canvas context
ctx.imageSmoothingEnabled = true
ctx.imageSmoothingQuality = 'high'

我如何摆脱这些工件？