87,910
社区成员
发帖
与我相关
我的任务
分享求助，关于html2canvas.js，将DIV内容写入Canvas生成图片
昨天遇到一需求，需要用到html2canvas.js，将DIV内容写入Canvas生成图片。
里面需要显示微信用户的头像，一个推广二维码。
写了一个测试的页面，发现调用本地图片没有问题，但是外部图片也就是跨域的图片时，就不行了，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>
...全文
请发表友善的回复…
发表回复
紫色田园 2017-11-01
- 打赏
- 举报
没有人知道，或者没人用微信的二维码图试过么？
紫色田园 2017-11-01
- 打赏
- 举报
后来参考了网上一些大侠的办法，
修改了html2canvas.js，
----------------------------------------
修改了html
-------------------------------------
现在是头像可以显示了，可是二维码还是显示不了。
请各位大侠指点下小弟呀，两个跨域的图片，为啥一个可以一个不行呢？
修改了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>
现在是头像可以显示了，可是二维码还是显示不了。
请各位大侠指点下小弟呀，两个跨域的图片，为啥一个可以一个不行呢？
