在使用canvas toDataUrl() 想把圖片轉(zhuǎn)換成canvas 再轉(zhuǎn)換成base64格式的圖片，但是這樣會一直出現(xiàn)透明圖片的情況，代碼如下

var canvas = document.querySelector('canvas')
var ctx = canvas.getContext("2d");
var img = new Image()
img.src = '1.png'
img.crossOrigin = "Anonymous"
img.onload = function(){
    ctx.drawImage(img,0,0,100,100)
}
 console.log(canvas.toDataURL())

當(dāng)時我以為是圖片未加載完成 所以把代碼修改了一下

var img = new Image()
img.src = '1.png'
img.onload = function(){
    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,100,100)
    console.log(canvas.toDataURL())
}

但是一直會出現(xiàn)畫布污染的情況 我的這個圖片是本地的圖片。經(jīng)過查找資料發(fā)現(xiàn)
有一個屬性img.crossOrigin="Anonymous看大部分都是這個可以解決問題
但是在我本地圖片轉(zhuǎn)換中發(fā)現(xiàn) 依舊報錯 這是后來的代碼

var img = new Image()
img.src = '1.png'
img.crossOrigin = "Anonymous"
img.onload = function(){
    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,100,100)
    console.log(canvas.toDataURL())
}

報錯信息如下

請求指點