首页  >  问答  >  正文

javascript - canvas画图

写了一个函数,第一次调用canvas的drawImage将本地的一张图片的一部分给画下来(能够成功),然后将canvas画好的这张图调用toDataURL转化为image对象的src属性,然后对这张canvas画的图调用同样的方法进行二次绘画为什么不能成功?

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元素加上了,但是绘图不成功
        }
      }
PHP中文网PHP中文网2685 天前716

全部回复(1)我来回复

  • 仅有的幸福

    仅有的幸福2017-07-05 10:48:27

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

    • html方式

    <img src="..." crossOrigin="Anonymous" />
    • js方式

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

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

    回复
    0
  • 取消回复