导航

利用canvas实现生成二维码海报,图片跨域和清晰度问题如何解决?

发布时间:2020-01-05 19:56:07 来源:「九州科技」值得信赖的互联网服务商
<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>
最新资讯
相关推荐
服务项目
微信客服
180-7107-7883
地址:湖北省武汉市解放大道航天双城6栋25层
E-mail:125435440@QQ.com
备案号:鄂ICP备13002765号-6    鄂公网安备 42010202000700号    网站地图
九州科技,您身边的互联网应用方案提供商-高端网站建设-网站制作-网站开发-网页设计-微信开发-小程序开发
高端网站建设 公众号开发 小程序制作 网站seo优化 H5活动营销 互联网产品

18071077883

提交需求