canvas 畫布污染報(bào)錯(cuò)

在使用canvas toDataUrl() 想把圖片轉(zhuǎn)換成canvas 再轉(zhuǎn)換成base64格式的圖片，但是這樣會(huì)一直出現(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)時(shí)我以為是圖片未加載完成 所以把代碼修改了一下

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())
}

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

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())
}

報(bào)錯(cuò)信息如下

請(qǐng)求指點(diǎn)