canvas 画布污染报错

Question

在使用canvas toDataUrl() 想把图片转换成canvas 再转换成base64格式的图片，但是这样会一直出现透明图片的情况，代码如下

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

当时我以为是图片未加载完成 所以把代码修改了一下

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

但是一直会出现画布污染的情况 我的这个图片是本地的图片。经过查找资料发现
有一个属性img.crossOrigin="Anonymous看大部分都是这个可以解决问题
但是在我本地图片转换中发现 依旧报错 这是后来的代码

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

报错信息如下

请求指点

Answer 1

img.crossOrigin = 'anonymous'
这个貌似也应该不行
你得启动服务器环境，你貌似是file://要改为http://这样就行了

Answer 2

将其部署到github然后访问还是会出现这个问题怎么破??