html页面使用html2canvas生成图片保存,在微信上点击无反应事件

最近又学习了新的功能,将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/

猜你喜欢

转载自blog.csdn.net/a_grain_of_wheat/article/details/106252274