Missing scale factor when generating image

[gary-dgc]

getImageUrl() {
    const scaleFactor = this.scaleFactor
    const {
        x, y, w, h,
    } = this.selectRect
    if (w && h) {
        let imageData = this.bgCtx.getImageData(x * scaleFactor, y * scaleFactor, w * scaleFactor, h * scaleFactor)
        let canvas = document.createElement('canvas')
        canvas.width = w * scaleFactor // Missing scale other than 1.0
        canvas.height = h * scaleFactor // Missing scale other than 1.0
        let ctx = canvas.getContext('2d')
        ctx.putImageData(imageData, 0, 0)
        return canvas.toDataURL()
    }
    return ''
}

[gary-dgc]

in order to keep proper size, need to resize it.

  getImageUrl () {
    const scaleFactor = this.scaleFactor
    const {
      x, y, w, h
    } = this.selectRect
    if (w && h) {
      let imageData = this.bgCtx.getImageData(x * scaleFactor, y * scaleFactor, w * scaleFactor, h * scaleFactor)
      let canvas = document.createElement('canvas')
      canvas.width = w * scaleFactor
      canvas.height = h * scaleFactor
      let ctx = canvas.getContext('2d')
      ctx.putImageData(imageData, 0, 0)
      // need to scale down for high pixel screen
      if (scaleFactor > 1) {
        let smallCanvas = document.createElement('canvas')
        smallCanvas.width = w
        smallCanvas.height = h
        let smallContext = smallCanvas.getContext('2d')
        smallContext.scale(1.0 / scaleFactor, 1.0 / scaleFactor)
        smallContext.drawImage(canvas, 0, 0)
        canvas = smallCanvas
      }
      return canvas.toDataURL()
    }
    return ''
  }