寫了一個函數,第一次呼叫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元素加上了,但是绘图不成功
}
}
仅有的幸福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/