昨天遇到一需求,需要用到html2canvas.js,将DIV内容写入Canvas生成图片。
里面需要显示微信用户的头像,一个推广二维码。
写了一个测试的页面,发现调用本地图片没有问题,但是外部图片也就是跨域的图片时,就不行了,canvas生成的图片
中头像和二维码显示不出来。代码如下:
----------------------------<body>
<div id="tplDef" style="width:360px;height:533px;background:url(./dpewmblama.png) no-repeat;">
<br/>
<p>I love this game to YOU</p>
<br/>
<br/>
<!--头像-->
<p><img src="http://wx.qlogo.cn/mmopen/wprMnqDUJH5n0UrwzDCaueic6wic0N9ckEDCI0JiaO0w0fr9EY8iaEQ0zmQKLmR9sywQHeNPkcQ1LyvVBR0LNbJfvibOu9ichCibHA7/0" width="100" /></p>
<br/>
<br/>
<!--二维码-->
<p><img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQHg8TwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAycWgtNFF3R3Viby0xMDAwMGcwM0EAAgTeo7dZAwQAAAAA" width="100" /></p>
</div>
<div style="width:360px;height:533px;background-color:#333;">
<img id="curTpl" src=""  style="width:80%;height:80%;display:none;margin:0 auto;margin-left:30px;margin-top:20px;">
</div>
<script>
$(function () {
    html2canvas($("#tplDef"), {
onrendered: function(canvas) {
var url = canvas.toDataURL();//图片地址
//alert(url);
//document.body.appendChild(canvas);
$("#tplDef").hide();
$("#curTpl").attr('src',url);
$("#curTpl").show();
}
});
});
</script></body>

解决方案 »

  1.   

    后来参考了网上一些大侠的办法,
    修改了html2canvas.js,
    ----------------------------------------function ImageContainer(src, cors) {
        this.src = src;
        this.image = new Image();
        var self = this;
        this.tainted = null;
        this.promise = new Promise(function(resolve, reject) {
            self.image.onload = resolve;
            self.image.onerror = reject;
            if (cors) {
                //self.image.crossOrigin = "anonymous";
                self.image.crossOrigin = "";//设为空
            }
            //self.image.src = src;
            self.image.src = src + "?" + new Date().getTime();//加上时间
            if (self.image.complete === true) {
                resolve(self.image);
            }
        });
    }
    修改了html
    -------------------------------------<script>
    $(function () {
        html2canvas($("#tplDef"), {
    onrendered: function(canvas) {
    var url = canvas.toDataURL();//图片地址
    //alert(url);
    //document.body.appendChild(canvas);
    $("#tplDef").hide();
    $("#curTpl").attr('src',url);
    $("#curTpl").show();
    },useCORS:true
    });
    });
    </script>
    现在是头像可以显示了,可是二维码还是显示不了。
    请各位大侠指点下小弟呀,两个跨域的图片,为啥一个可以一个不行呢?