<div id="id1" style="background-image:url(bg.jpg);background-size:100% 100%;background-repeat:no-repeat;background-position:top center;height:620px;">
要生成的内容
要生成的内容中如果存在外部网址的图片,即跨域图片那么就会失败,这时候我们就需要通过上传的方式把远程图片下载到本地,再读取就可以解决了。
生成海报如果不够清晰,最笨的方式就是把背景图放做大一倍以上,因为canvas是先将图片放大再缩小,所以会模糊。
</div>
<div id="id2"></div>
<script type="text/javascript" >
function jietu(){
var fe = document.getElementById("id1");
html2canvas(fe, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "id2";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.getElementById("id1").style.display ='none';
document.body.appendChild(newImg);
}
});
}
</script>