Javascript-Leinwandzeichnung

Question

Schreiben Sie eine Funktion, rufen Sie zuerst drawImage von Canvas auf, um einen Teil eines lokalen Bildes zu zeichnen (erfolgreich), und rufen Sie dann toDataURL auf, um das auf Canvas gezeichnete Bild in das src-Attribut des Bildobjekts zu konvertieren, und dann Warum kann ich dasselbe nicht verwenden? Methode, um dieses Bild erfolgreich auf Leinwand zu zeichnen?

function paint(img) {
        var canvas = document.createElement('canvas')
        canvas.width = 400
        canvas.height = 400
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 400)
        document.body.appendChild(canvas)//画好的第一个canvas对象可以正常显示
        var newImg = new Image()
        newImg.src = canvas.toDataURL()
        newImg.onload = function() {
          var canvas2 = document.createElement('canvas')
          canvas2.width = 200
          canvas2.height = 200
          var ctx2 = canvas2.getContext('2d')
          ctx2.drawImage(newImg, 0, 0, Math.abs(posX), Math.abs(posY), 0, 0, 200, 200)//这里之所以把第一次的canvas作图加载成一张图片,是因为不知道canvas可不可以绘制canvas
          document.body.appendChild(newImg)//这张图片能正常显示
          document.body.appendChild(canvas2)//canvas元素加上了,但是绘图不成功
        }
      }

Answer 1

你是不是用的外站图片? 如果是，需要给图片加上 crossOrigin="Anonymous" 属性。

• html方式

<img src="..." crossOrigin="Anonymous" />

• js方式

var image = new Image();
image.src = "...";
image.crossOrigin = "Anonymous";

你可以在线把玩一下我用你的代码修改的可运行的版本：https://jsfiddle.net/5g9n9esk/