安卓机型部分浏览器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
解决方案
-
使用其他第三方库解决
-
后端提供根据视频地址和时间点生成截图的接口
-
产品调整功能
网友评论