html2canvas.js使用过程中在ios下遇到的bug——背景音乐重复播放

在上一篇文章中已经介绍了其中遇到的一个bug——截图不完整，点击打开链接。

这篇文章给大家说一下在使用html2canvas截图时，遇到的另一个bug，背景音乐在IOS11下会重复播放的问题！

（说明：项目是移动端项目，只限IOS11及以上系统，若是PC端、安卓bug、IOS10/9/8，请对比参考）

遇到此问题的时候，实在很无语，因为IOS11刚刚出来，在网上搜索有关bug的文章实在没有，又不得不用html2canvas，今日就把工作中遇到的问题给大家分享一下。

首先说一下html2canvas的工作原理

Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面（整屏）截图下来。
换句话来说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像，生成base64的图片流程。
这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

使用方法

html2canvas(element, options);

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas 是最后一个渲染的<canvas> 元素
    }
});

个人分析在IOS11下背景音乐在调用Html2canvas()会重复播放，说明背景音乐在Html2canvas从DOM读取信息渲染成图片时，背景音乐在已有的播放音乐没有停止的情况下，又重复加载了一次，所以想到的解决方法就是在Html2canvas()在调用时，背景音乐不自动播放，不管想的原理对不对，但是这样还真解决的问题，代码附上，供大家参考一下。

//解决ios11下，重复加载背景音乐的bug
function iosMusic(){
  var agent = navigator.userAgent.toLowerCase() ;//判断手机系统
  // console.log(agent);
  var version;
  if(agent.indexOf("like mac os x") > 0){
      //ios
      var regStr_saf = /os [\d._]*/gi ;
      var verinfo = agent.match(regStr_saf) ;
      version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//获取具体的系统版本号
      console.log(version)
      var typeNum = version.split(".")[0];//获取系统版本号的第一位数字
      console.log(typeNum)
      if(typeNum >= 11){
        $("#myaudio").removeAttr("autoplay");
      }
  }
}

这里用了一个手机系统的判断，最重要的一句话是给背景音乐删除自动播放的属性

$("#myaudio").removeAttr("autoplay");

然后调用html2canvas时，引用此函数

为什么在IOS11下背景音乐会重复播放，这个究竟是IOS11系统的兼容问题，还是html2canvas插件的问题，小学生没有太多研究，望大神给指点，目前只是个人碰到的问题与解决的方法，与同行们分享一下！前端道路深似海，与大家共奋进！

本人项目链接地址参考：点击打开链接

声明：转载请注明出处，谢谢！