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:
timeUpdate: function (e) {//实时播放进度 秒数var currentTime = parseInt(e.detail.currentTime)this.setData({'currentTime': currentTime,});// console.log("视频播放到第" + currentTime + "秒") //查看正在播放时间,以秒为单位},//绘制截图getCanvas() {const dpr = wx.getSystemInfoSync().pixelRatiowx.createSelectorQuery().select('#video').context(res => {console.log('select video', res)const video = this.video = res.contextvideo.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].nodeconst ctx1 = res[0][0].node.getContext('2d')res[0][0].node.width = this.data.videoWidthres[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()},