图片转base64跨域问题

//一般出现跨域, 只需要在图片设置这个属性: crossorigin="anonymous"  允许跨域  即可 

 <img  src="https://www.baidu.com/" id ="img"  crossorigin="anonymous"> 

<button id='btn'>下载</button>

function  imgToBase64() {

    let img = document.getElementById('img)

    let canvas = document.createElement('cavas')

    canvas.width = 100 

    canvas.width = 100

    let ctx = canvas.getContext('2d');

    ctx.drawImage(img,0,0)

     retrun canvas.toBaseUrl('image/png')

}

// 下载图片

document.getElementById('btn').onclick= () => {

    let a  = document.createElement('a')

    a.setAttribute('href',  imgToBase64() ) 

    a.setAttribute('download', 'img.png' )

    a.click()

    a.remove()

}

尽管设置了允许跨域,依然出现画布被污染的报错提示  ,所有 换了一种方式 



function  imgToBase64() {

    let img = new Image()

    img.src = 'https://www.baidu.com/'

    img.setAttribute('crossorigin', ' *' )

    let canvas = document.createElement('cavas')

    canvas.width = 100 

    canvas.width = 100

    let ctx = canvas.getContext('2d');

   img.onload = () => {

     ctx.drawImage(img,0,0)

        downloadImg ( canvas.toBaseUrl('image/png') )

    }

}



function downloadImg(src){

    const qrLinkEl = document.createElement('a')

    qrLinkEl.setAttribute('href', url)

    qrLinkEl.setAttribute('download', 'qr.png')

    qrLinkEl.click()

    qrLinkEl.removeAttribute('click')

}
``