canvas 旋转图片

// 横屏写的,坚屏展示,需旋转270度

rotateBase64Img(src: any, callback: any) {
    const canvas = document.createElement('canvas')
      const ctx: any = canvas.getContext('2d')
      const image = new Image()
      image.crossOrigin = 'anonymous'
      image.src = src
      image.onload = function () {
        const max = image.height
        canvas.width = max
        canvas.height = max
        // ctx.fillStyle = "#999";
        // ctx.fillRect(0, 0, max, max);
        ctx.translate(max / 2, max / 2); // 移动中心点到正中心
        ctx.rotate(270 * Math.PI / 180);
        ctx.translate(-max / 2, -max / 2); // 移回到原处
        ctx.drawImage(image, max / 4, 0)
        const imgData = ctx.getImageData(0, max / 4, max, max / 4 * 3)
        canvas.height = max / 2
        ctx.clearRect(0, 0, max, max)
        ctx.putImageData(imgData, 0, 0)
        callback(canvas.toDataURL())
      }
  }
posted @ 2022-06-02 18:25  James2019  阅读(184)  评论(0编辑  收藏  举报