记《读书日活动需求》bug总结

2022-04-19 20:32:35 阅读：166 来源： 互联网

标签：总结 src const image html2canvas 读书 iframe bug 页面

此次读书日活动功能主要是：五个问题对应五个动画交互页面，答完5道题之后展示一段视频（随机从书架上抽出一本书的动画效果），随后进入结果页面。

在结果页需要做站内站外的分享交互，将结果页面利用html2canvas转成图片，再将图片分享到各个平台。

开发过程中遇到的问题如下：

***html2canvas转apng资源元素异常***

通过image标签使用的apng动画，当它播放完成之后，再使用html2canvas转image元素，此时得到的只是apng动图的第一帧静态图片而不是最后一帧，所以需要再播放完成之后将src替换成最后一帧图片的url再使用html2canvas转。

***html2canvas转image元素时失效***

对于image元素，需要将其资源url import进来之后在dom中赋值到image元素的src上，写在css里不行。

***html2canvas会使当前页面中autoplay的audio再次播放***

这是因为html2canvas会临时遍历创建一套当前页面中所有的dom元素，再将转换目标元素择出来。解决办法是：在调用html2canvas之前，将audio元素临时移除掉autoplay属性，执行完之后再加上autoplay属性。

document.getElementById("WorldBookDayMusic").removeAttribute('autoPlay')

***在iOS移动端微信浏览器上，视频和音频无法播放，安卓端可以***

解法如下：

init = () => {
    if (this.refVideo) {
      this.refVideo.play()
      if (typeof WeixinJSBridge !== 'undefined') {
        WeixinJSBridge.invoke('getNetworkType', {}, e => {
          this.refVideo.play()
        })
      }
    }
  }

***在iOS手机上，H5页面中audio的音量无法通过volume来设置***

解法如上：将音频文件本身的音量设置大些，这样在audio中直接通过src使用就可。

*** 在安卓手机上，video视频会闪现下默认播放图标***

解法如下图：加上 poster="noposter"即可

***在iOS 13.4版本上，html2canvas无效（无报错无响应）***

解法：需要将html2canvas版本设置成 1.0.0-rc.4，即在package.json中设置 "html2canvas": "1.0.0-rc.4"。但是这个版本在服务端渲染项目中会报 window is not defined错误，所以不能在页面顶部import，在使用的地方import。

utils.js文件

const importHtml2Canvas = () => import (/* webpackChunkName: "activityHtml2canvas" */ 'html2canvas')

const _ = ''

export {
  _ as default,
  importHtml2Canvas,
}

使用：

const html2canvas = await (await (importHtml2Canvas)()).default

***在APP内，进入活动结果页面，点击分享调用客户端分享协议后，再点击重新测试，再次进入结果页时会再次触发客户端分享协议***

解法：

在didMount中调用getInitIframe方法，如下，将首次iframe的src存下来：

getInitIframe = () => {
    const {isIOS} = this.props
    if (isIOS && document.getElementsByTagName('iframe')[0]) {
      this.setState({iframeSrc: document.getElementsByTagName('iframe')[0].src})
    }
  }

点击重新测试按钮时，执行

const {isIOS} = this.props
    if (isIOS && document.getElementsByTagName('iframe')[0]) {
      document.getElementsByTagName('iframe')[0].src = this.state.iframeSrc
    }

标签：总结,src,const,image,html2canvas,读书,iframe,bug,页面
来源： https://www.cnblogs.com/chenbeibei520/p/16167177.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

记《读书日活动需求》bug总结