Скриншот видео из uniapp
Эта статья посвящена только мини-программам WeChat. Она не тестировалась на других платформах и не уверена в осуществимости.
WeChat предоставляет два компонента для воспроизведения видео:
live-player: Пока он используется для воспроизведения аудио и видео в реальном времени (из соображений политики и соответствия требованиям WeChat еще не реализовал<live-player>поддержку тегов во всех мини-программах, подробности см. в официальной документации ).video: Проиграть видео.
Используйте live-playerкомпоненты для создания снимков экрана
LivePlayerContextВ экземпляре есть метод , который snapshotможно вызвать, чтобы сделать снимок экрана.
Пример псевдокода:
<live-player id="myVideo" src="xxxx" :autoplay="isPlay" mode="live"></live-player>
// 获取live-player上下文对象
const ctx = wx.createLivePlayerContext('#myVideo');
ctx.play({
success: () => {
// 确保视频播放成功才进行截图
ctx.snapshot({
success: res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempImagePath,
success: () => {
console.log('save success');
},
fail: () => {
console.log('save fail');
},
})
},
fail: () => {
console.log('snapshot fail');
}
})
}
});
Приведенный выше псевдокод описывает, как сделать снимок экрана и сохранить его на своем телефоне.
Используйте videoкомпоненты для создания снимков экрана
videoСам компонент предоставляет элемент управления ( show-snapshot-button), который помогает нам делать снимки экрана, но этот элемент управления будет отображаться только в полноэкранном режиме. Ознакомьтесь с официальной документацией .
<video id="myVideo" style="width: 100%;height: 200px"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
object-fit="fill" show-snapshot-button controls />
Как вы можете видеть на картинке ниже, справа находится значок камеры. Нажмите, чтобы сделать снимок экрана и загрузить его на свой телефон.
Однако в неполноэкранном состоянии элемент управления снимком экрана не будет отображаться, и VideoContextобъект не предоставляет метод снимка экрана.
Использовать холст
Хотя VideoContextобъект не предоставляет метод создания снимка экрана и его нельзя сделать в неполноэкранном состоянии, мы также можем использовать его canvasдля реализации метода создания снимка экрана вручную.
<video id="myVideo" style="width: 100%;height: 200px"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
object-fit="fill" show-snapshot-button controls />
<canvas id="hiddenCanvas" style="width: 100%; height: 200px;" type="2d" canvas-id="circleCanvas"></canvas>
<button @tap="snapshot">截图</button>
В настоящее время эффект страницы следующий:
// 获取video上下文
const getVideoContext = (id, instance) => {
const query = uni.createSelectorQuery().in(instance);
const queryVideo = query.select(`#${
id}`).context();
return new Promise((resolve, reject) => {
queryVideo.exec(res => {
resolve(res);
});
});
}
async record() {
const query = wx.createSelectorQuery()
query.select('#hiddenCanvas')
.fields({
node: true,
size: true
})
.exec(async (res) => {
const canvas = res[0].node;
const dpr = uni.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr // 获取宽
canvas.height = res[0].height * dpr // 获取高
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr)
const video = await getVideoContext('myVideo', this);
console.log(video)
ctx.drawImage(video[0].context, 0, 0);
})
}
Добавляем способ сохранить
async record() {
const query = wx.createSelectorQuery()
query.select('#hiddenCanvas')
.fields({
node: true,
size: true
})
.exec(async (res) => {
const canvas = res[0].node;
const dpr = uni.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr // 获取宽
canvas.height = res[0].height * dpr // 获取高
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr)
const video = await getVideoContext('myVideo', this);
console.log(video)
ctx.drawImage(video[0].context, 0, 0);
// 从canvas获取图片像素数据
const imgData = canvas.toDataURL('image/png');
this.saveImage(imgData);
})
}
function saveImage(url) {
let base64 = url.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
let filePath = wx.env.USER_DATA_PATH + '/video.png';
uni.getFileSystemManager().writeFile({
filePath: filePath, //创建一个临时文件名
data: base64, //写入的文本或二进制数据
encoding: 'base64', //写入当前文件的字符编码
success: res => {
console.log(res);
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: () => {
console.log('保存成功')
},
fail: err => {
console.log('保存失败')
}
})
}
})
}
Теперь нажмите на скриншот, чтобы сохранить его прямо на телефоне.
Возможно, нам не нужно отображать его на странице canvas. Если вы установите его непосредственно display:none, чтобы скрыть его, saveImageToPhotosAlbum:fail save fail:Error Domain=PHPhotosErrorDomain Code=3302 "(null)"произойдет ошибка. В настоящее время вы можете использовать его для перемещения position:absolute;всего слоя представления из слоя представления после абсолютного позиционирования ( например, затем укажите относительно большое значение, чтобы изображение вышло за пределы диапазона экрана. ).canvasleftcanvas