html页面:
视频尺寸过大会画布会撑开屏幕,要下滑
尺寸和视频链接是从上个页面点击传过来的,可自行定义
html
<canvas id="cvs1" type="2d" style="width: {{videoWidth}}px;height: {{videoHeight}}px;"></canvas>
<video id="video" src="{{tempFilePath}}" bindtimeupdate="timeUpdate"></video>
<t-button class="block" bind:tap="getCanvas" theme="primary">立即截图</t-button>
<image src="{{cropurl}}" style="width: 100%;" mode="widthFix" />
js:
TypeScript
timeUpdate: function (e) {
//实时播放进度 秒数
var currentTime = parseInt(e.detail.currentTime)
this.setData({
'currentTime': currentTime,
});
// console.log("视频播放到第" + currentTime + "秒") //查看正在播放时间,以秒为单位
},
//绘制截图
getCanvas() {
const dpr = wx.getSystemInfoSync().pixelRatio
wx.createSelectorQuery().select('#video').context(res => {
console.log('select video', res)
const video = this.video = res.context
video.pause() // 暂停视频,防止继续播放
video.seek(this.data.currentTime) // 将视频定位到当前时间
// console.log("视频宽度高度", this.data.videoWidth, this.data.videoHeight)
wx.createSelectorQuery().selectAll('#cvs1').fields({
node: true,
size: true
})
.exec((res) => {
console.log('select canvas', res)
const canvas = res[0][0].node
const ctx1 = res[0][0].node.getContext('2d')
res[0][0].node.width = this.data.videoWidth
res[0][0].node.height = this.data.videoHeight
//图片加载完成后绘制到画布上
ctx1.drawImage(video, 0, 0, this.data.videoWidth, this.data.videoHeight);
console.log("ctx1=>", ctx1)
wx.canvasToTempFilePath({
width: this.data.videoWidth,
height: this.data.videoHeight,
canvas: canvas,
success: (res) => {
console.log("图片路径", res.tempFilePath)
//一定要有这一步不然拿到的是空白图片
this.setData({
canvasurl: res.tempFilePath
})
//裁剪图片
wx.cropImage({
src: this.data.canvasurl, // 图片路径
cropScale: '4:3', // 裁剪比例
success: (res) => {
console.log('裁剪后图片', res)
this.setData({
cropurl: res.tempFilePath
})
}
})
},
fail: (err) => {
console.log(err)
}
})
})
// //base64
// // setTimeout(() => {
// // this.setData({
// // // 导出canvas的url(base64格式)
// // canvasurl: canvas.toDataURL('image/png'),
// // show: true
// // })
}).exec()
},