最近又学习了新的功能,将HTML页面伤的标签生成图片保存在本地。
将此段Html代码生成图片
<div class="citationModel">
<div class="erImg">
<img src="static/img/erwei.png" alt="">
</div>
<div class="citation-btn" data-html2canvas-ignore="true">
<div οnclick="saveImg()"><img src="static/img/save-img.png" alt=""></div>
<div οnclick="shareImg()"><img src="static/img/share-btn.png" alt=""></div>
</div>
</div>
js代码:
html2canvas(document.getElementsByClassName("citationModel")[0], {
// scale: 1,//缩放比例,默认为1
taintTest: true, //在渲染前测试图片(没整明白有啥用)
allowTaint: false,//是否允许跨域图像污染画布
useCORS: true,//是否尝试使用CORS从服务器加载图像
backgroundColor: '#000000',//画布的背景色,默认为透明
}).then((canvas) => {
//将canvas转为base64格式
$('#poster').show()
var imgUri = canvas.toDataURL("image/png", 1.0);
var newImg = document.createElement("img");
newImg.src = imgUri;
newImg.className = 'poster';
document.querySelector('#poster').appendChild(newImg);
});
这个属性是过滤调不需要显示的内容
data-html2canvas-ignore="true"
但是中间也是走过了一道道的坑
ios系统的微信上点击无反应。。。。。。。。。。。。
最后是html2canvas.js的版本不行,从官网上下载的
官网地址:http://html2canvas.hertzen.com/
最终找到了一个 https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0-rc.4
这里面的版本
感谢大神的指导:https://blog.csdn.net/cangege123/article/details/105846387/