html2canvas硬核解决跨域

html2canvas无法生成部分图片
本质原因是跨域, 后端好解决但是前端需要另辟蹊径:

// 首先根据url动态创建canvas 画图 获取base64
// 其次用base64替换掉之前的图片路径 即可显示 注意异步操作
const handleImg2Base64 = (src: string) => {
    let img = new Image();
    img.crossOrigin = "Anonymous"; //重要,解决图片跨域的问题
    img.src = src + '?time=' + new Date().valueOf();
    img.onload = function () {
        let canvas: any = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
        let dataURL = canvas.toDataURL('image/jpeg');
        // console.log( dataURL )
        myPrizeInfo.value.prizePicture = dataURL
        prizeDetail.value.prizePicture = dataURL
    }
}

html2canvas( document.getElementsByClassName('content-container')[0] , {
    dpi: 120,
    useCORS: true,
    allowTaint: true,
}).then((canvas: any) => {
    // document.body.appendChild(canvas)
    let base64 = canvas.toDataURL().replace('data:image/png;base64,', '')
    isGenerating.value = false;
})