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下，重复加载背景音乐的bug
function iosMusic(){var agent = navigator.userAgent.toLowerCase() ;//判断手机系统// console.log(agent);var version;if(agent.indexOf("like mac os x") > 0){//iosvar 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");

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

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

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