小程序 canvas画video暂停时的图像

最新推荐文章于 2024-04-27 19:48:28 发布

郭玉齐

最新推荐文章于 2024-04-27 19:48:28 发布

阅读量776

点赞数 3

分类专栏：笔记文章标签：小程序 css html

本文链接：https://blog.csdn.net/qq706352062/article/details/123423639

版权

笔记专栏收录该内容

113 篇文章 1 订阅

订阅专栏

要做的功能就是当video暂停时把当前的图像用canvas画下来

<view class="content">
        <video 
            id="myVideo"
            src="{{items.fileUrl}}"
            bindtap="bindClckVideo"
            controls="{{true}}"
            show-fullscreen-btn="{{false}}"
            show-play-btn="{{false}}"
            show-center-play-btn="{{false}}"
            enable-progress-gesture="{{false}}"
            enable-play-gesture="{{true}}"
            loop="{{true}}"
            autoplay="{{true}}"
            object-fit="{{items.coverType == 1 ? 'cover' : 'contain'}}"
            custom-cache="{{false}}"
            bindcontrolstoggle="bindcontrolstoggle"
            bindloadedmetadata="bindloadedmetadata"
        >
            <image wx:if="{{!isPlaying}}" class="mv_image_player" src="../../../images/player.png"></image>
            <canvas id="cvs1" type="2d" class="map" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' canvas-id="cvs1" disable-scroll="true" ></canvas>
            
        </video>
    </view>

const app = getApp();


Page({
    data: {
      
        isPlaying: true,
        imgUrl: '',
        sceneNum:0,
        canvasWidth: '',
        canvasHeight: ''
    },
    onLoad: function (option) {
       
        
    },
   
  
    bindMark() {
        
        let that = this
      
       
        wx.showLoading({
            title: '请稍等',
        })
        // 设备像素
        const dpr = wx.getSystemInfoSync().pixelRatio
        console.log(dpr)
        wx.createSelectorQuery().select('#myVideo').context(res => {
            // 获取myvideo
            const video = res.context
            wx.createSelectorQuery().selectAll('#cvs1').node(res => {
                const ctx1 = res[0].node.getContext('2d')
                const _canvas = res[0].node;
                res[0].node.width = 300 * dpr
                res[0].node.height = 150 * dpr
                ctx1.drawImage(video, 0, 0, res[0].node.width, res[0].node.height);
                console.log('画完图了')
            
                wx.canvasToTempFilePath({
                    canvas: _canvas,
                    success: function (res) {
                        var tempFilePath = res.tempFilePath;
                        that.data.sceneNum++
                        if(that.data.sceneNum ===1){
                            that.bindMark()
                            return
                        }
                      
                        console.log(tempFilePath);
                        that.setData({
                            img:tempFilePath
                        })
                        wx.hideLoading()
                        wx.navigateTo({
                            url: '/pagesubject/sceneVideo/sceneVideo?tempFilePath=' + tempFilePath,
                        })
                    },
                    fail: function (res) {
                        console.log(res);
                    }
                }, that)

            }).exec()
        }).exec()
    },
 
    onHide() {

    },
    onShow() {
        //选择id
        var that = this;
        wx.createSelectorQuery().selectAll('#cvs1').node(res => {
            console.log('select canvas', res)
            const c = res[0].node
            const ctx1 = res[0].node.getContext('2d')
            console.log('清除canvas画布数据宽高：', c.width, c.height)
            ctx1.clearRect(0, 0, c.width, c.height)
            // 给canvas宽高
            var query = wx.createSelectorQuery();
            query.select('#myVideo').boundingClientRect(function (rect) {
                console.log('设置canvas高度：', rect.width, rect.height)
                that.setData({
                    canvasHeight: rect.height,
                    canvasWidth: rect.width,
                })
            }).exec();
        }).exec()





    },

})