html2canvas 画图然后canvas生成图片（解决跨域），最简代码

1、图片服务器要允许跨域

2、html里的crossorigin属性，目测没啥用，要canvas调用，还是需要在js里

    img.setAttribute("crossOrigin",'Anonymous') ;

3、html2canvas 自己看文档，这里说一个关键属性

4、Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    这个问题的出现，就是因为跨域，不要允许canvas被污染，要直接能够跨域拿到的图，方法在本文里。

 

代码如图：

$(function(){
   //1、将两张图片渲染到界面上（）
    let posterbg = new Image();
    let qrcode = new Image();

    posterbg.setAttribute('class','postbg');
    qrcode.setAttribute('class','qrcode');

    posterbg.setAttribute("crossOrigin",'Anonymous') ;//这两行比较关键
    qrcode.setAttribute("crossOrigin",'Anonymous') ;

    posterbg.src="card1.jpg";
    qrcode.src="qrcode.png";

    var times = 0 ;
    posterbg.onload = onLoad;
    qrcode.onload = onLoad;

    function onLoad(){
        if(times >= 1){
            $('#viewport').append(posterbg);
            $('#viewport').append(qrcode);
            draw();
        }else{
            times++ ;
        }
    }

    function draw(){
        let opt = {
            useCORS : true //这个配置项也很关键，我从html2canvas的api上看到的
        }
        //canvas截图
        html2canvas(document.getElementById('viewport'),opt).then(function(canvas) {
            //获得canvas对象   将canvas转成png         
            let img = new Image();
            let base64ImgSrc = canvas.toDataURL("image/png")
            img.src = base64ImgSrc 
            img.setAttribute('class','postbg');
            img.onload = function(){                
                //隐藏原先的样式
                $('#viewport').hide();
                //新增一张图片
                $('.wrapper').append(img)
            }
        }).catch(err=>{
            console.log(err);
        })
    }
})