本文主要是介绍用canvas 实现EasyWasmPlayer视频截屏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
使用canvas进行截图
<div :class="'box ' + 'box' + boxIndex" id="con_lf_top_div"><div v-for="(item, index) in videoList" class="box-item" :key="index"><img class="imgImg" v-if="item == null" :src="avatar" /><div :id="'Player' + index" v-else></div><a-iconv-if="item != null"type="scissor"@click="clickScreenshot(item, index)"class="scissor"/></div>//部分代码，展示出来是为了清晰看下方获取的高度和宽度
clickScreenshot(item, index) {//最重要的是获取到videovar _video = this.player[index].h5Video//document.createElement() 方法来创建 <canvas> 元素const _canvas = document.createElement('canvas')// 播放器的宽高var _videoWidth = _video.videoWidthvar _videoHeight = _video.videoHeight//getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性,该对象导出一个二维绘图 API。const _ctx = _canvas.getContext('2d')// 获取当前con_lf_top_div的高和宽var a = getComputedStyle(con_lf_top_div, null).width.split('p')var b = getComputedStyle(con_lf_top_div, null).height.split('p')_canvas.width = a[0]_canvas.height = b[0]//fillStyle 属性设置用于填充的颜色_ctx.fillStyle = '#ffffff'//fillRect() 方法绘制“已填色”的矩形_ctx.fillRect(0, 0, _videoWidth, _videoHeight)// 剪切图像，并在画布上定位被剪切的部分_ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _canvas.width, _canvas.height)var dataUrl = _canvas.toDataURL('image/png')
}
这篇关于用canvas 实现EasyWasmPlayer视频截屏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
