canvas属性toDataURL转成图片问题

这个都说是跨域问题,为什么第一次进到页面没错,在推出去再进就报这个错

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

代码如下:

    export const generateShareImg = (parms) => {

    var mainCtx = getCanvasContext('main');
    var maxWidth = mainCtx.width;
    var maxHeight = mainCtx.height;

    mainCtx.clearRect(0, 0, 1000, 1000);
    var starBg = new Image();
    starBg.src = parms.backimg;

    var starImg = new Image();
    starImg.src = parms.imgUrl;

    var starImg1 = new Image();
    starImg1.src = parms.wecode;

    starImg.setAttribute('crossOrigin', 'anonymous');
    starImg1.setAttribute('crossOrigin', 'anonymous');

    starBg.onload = function() {
        //先把图片绘制在这里
        mainCtx.drawImage(starBg, 0, 0, 375, 600);
        
        
        starImg.onload = function() {
            //          头图
            mainCtx.drawImage(starImg, 0, 0, 300, 300);

            mainCtx.font = "small-caps bold 20px STXinwei";
            //设置用户文本填充颜色
            mainCtx.fillStyle = "#f53681";
            //价格
            mainCtx.fillText(parms.price, 10, 330);
            //          标题
            drawText(mainCtx, parms.title, 10, 330, 275, 'black');
            drawText(mainCtx, parms.storeName, 160, 440, 170, '#f53681');
            drawText(mainCtx, '微信中长按识别小程序码查看购买商品', 160, 470, 120, 'gray');
            
        mainCtx.drawImage(starImg1, 10, 410, 140, 140);
                
            convertCanvasToImage()
        };
    };
}
        
        
    export const convertCanvasToImage = () => {
        let canvas = document.getElementById('main');
        var image = new Image();
        //指定格式PNG
        image.src = canvas.toDataURL("image/jpg");
        image.onload = function(){
                document.getElementById('qrcode-box').appendChild(image);
        }

    }
阅读 5.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题