安卓机型部分浏览器drawImage方法调用无效问题记录

安卓机型部分浏览器drawImage方法调用无效问题记录

现象

在移动端开发和测试过程中，发现Android机型部分浏览器在使用canvas技术将视频截图绘制在canvas元素的过程中出现了空白截图的现象。经测试在android版的微信浏览器、小米浏览器、qq浏览器和UC浏览器中均存在此现象，在chrome浏览器中没有此现象。从而会影响这些浏览器的截图功能。

代码：

canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
// 此行代码在android部分浏览器无法生成正常的视频截图
canvas
    .getContext('2d')
    .drawImage(video, 0, 0, video.videoWidth, video.videoHeight)

测试地址

http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_drawimage_video

解决方案

• 使用其他第三方库解决

• 后端提供根据视频地址和时间点生成截图的接口

• 产品调整功能