reader/pages/userWorks/index.js

import {
    getSelfRead
} from '~/api/user'
let videoContext = null
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: [],
        currentId: '',
        videoState: true,
        canvasHidden: false, //设置画板的显示与隐藏
        shareImgPath: '' //用于储存canvas生成的图片
    },
    onLoad(options) {
        this.getSelfRead()
    },
    //获取自己作品列表
    async getSelfRead() {
        let list = await getSelfRead()
        this.setData({
            list
        })
        console.log(list[0]);
    },
    creatShare() {
        let context = wx.createSelectorQuery();
        context
            .select('#share')
            .fields({
                node: true,
                size: true
            }).exec(this.initCanvas.bind(this))
    },
    // 改变视频状态
    changStatus({
        detail
    }) {
        this.setData(detail)
    },
    // 开始播放
    playVideo({
        currentTarget
    }) {
        this.setData({
            videoState: true,
            currentId: currentTarget.dataset.id
        })
    },
    /* 改变视频播放状态 ,暂时先不用*/
    changeVideoState() {
        this.videoContext = wx.createVideoContext('myVideo')
        console.log(this.data.videoState);
        let videoState = this.data.videoState
        if (videoState) {
            this.videoContext.pause()
        } else {
            this.videoContext.play()
        }
        this.setData({
            videoState: !videoState
        })
    },
    // 初始化canvan并绘制
    initCanvas(res) {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr);
        ctx.font = '14px PingFang';
        let pic = canvas.createImage();
        pic.src = 'https://yfklxt-image.ai160.com/reader/20210910/1631254820926145.jpg'; //可以是本地，也可以是网络图片
        pic.onload = () => {
            ctx.drawImage(pic, 0, 0, 375, 211);
        }
        let peiyin = canvas.createImage();
        peiyin.src = '/static/image/peiyin.jpg';

        peiyin.onload = () => {
            ctx.drawImage(peiyin, 0, 211, 375, 89);
            // 收藏
            let sc = canvas.createImage();
            sc.src = '/static/image/no_collect.png'
            ctx.drawImage(sc, 12, 220, 20, 20)
            ctx.fillText('收藏', 36, 238)
            //分享
            let fx = canvas.createImage();
            fx.src = '/static/index/share.png'
            ctx.drawImage(fx, 78, 220, 22, 22)
            ctx.fillText('分享', 104, 238)
        }

    },
    onShareAppMessage({
        target
    }) {
        let video = target.dataset.info
        console.log(video);
    }
})