如何实现视频截图？
页面有一个video视频，以及一个按钮，点击按钮时将视频画面进行截图，安装了"wxml-to-canvas": "^1.1.1"，截图下来后发现图片都是黑屏的，应该怎么解决？ wxml <view class="container">
<video id="myVideo" src="{{videoSrc}}" controls autoplay></video>
<button bindtap="captureScreenshot">截取视频</button>
<canvas canvas-id="videoCanvas" style="width: 300px; height: 200px;"></canvas>
</view>
wxss .container {
display: flex;
flex-direction: column;
align-items: center;
}
video {
width: 100%;
height: 200px;
}
button {
margin-top: 10px;
}
js Page({
data: {
videoSrc: 'https://media.w3.org/2010/05/sintel/trailer.mp4', // 替换为实际视频链接
},
captureScreenshot: function () {
const videoContext = wx.createVideoContext('myVideo');
videoContext.pause(); // 暂停视频，以便捕获当前帧
const query = wx.createSelectorQuery();
query.select('#myVideo').boundingClientRect();
query.select('#videoCanvas').boundingClientRect();
query.exec((res) => {
const videoRect = res[0];
const canvasRect = res[1];
const canvasContext = wx.createCanvasContext('videoCanvas');
// 使用CanvasContext绘制视频帧
canvasContext.drawImage(this.data.videoSrc, 0, 0, videoRect.width, videoRect.height);
canvasContext.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: 'videoCanvas',
success: (res) => {
console.log('Canvas image path:', res.tempFilePath);
// 预览图片
wx.previewImage({
urls: [res.tempFilePath],
current: res.tempFilePath
});
},
fail: (err) => {
console.error('截图失败', err);
}
});
});
});
}
});
