index.js

// pages/tour/video/index.js
import {
    getLiveAddress,
    tourUserList,
    getCapture,
    getBase64
} from "../../../api/tour.js";
import _ from 'underscore';
const app = getApp();
let context;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isMall: false,
        navHeight: getApp().globalData.navHeight,
        cHeight: 330,
        cWidth: 414,
        userList: [],
        type: '',
        gateId: '',
        action: '',
        mallId: '',
        gateName: '',
        picUrl: '',
        tourType:'1'
    },
    onBack(){
       if(this.data.tval==2){
           wx.navigateBack({
             delta: 0,
           });
       }else{
           wx.redirectTo({
             url: '/pages/tour/gate/index',
           })
       }
    },
    backBtn(evt) {
        this.setData({
            gateSelect: false
        })
    },
    onChange(evt){
        let {index} = evt.detail;
        this.setData({
            tourType:index==0?1:0
        })
    },
    async drawInit() {
        let picInfo = await this.getImgPath(this.data.picUrl);
        let cObj = await this.getCanvas('painter');
        let canvas = cObj.node;
        const dpr = wx.getSystemInfoSync().pixelRatio;
        let img = canvas.createImage()
        img.src = picInfo.path;
        console.info('开始加载图片')
        img.onload = () => {
            console.info('图片加载完成')
            let width = cObj.width;
            let height = cObj.width * img.height / img.width;
            this.setData({
                canvas,
                cWidth: width,
                cHeight: height
            });
            canvas.width = width * dpr;
            canvas.height = height * dpr;
            let ctx = canvas.getContext('2d');
            ctx.scale(dpr, dpr);
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);
            context = ctx;
        }
    },
    startDraw(evt) {
        if (!context) return;
        let {
            x,
            y
        } = this.getXY(evt);
        context.strokeStyle = '#f00';
        context.lineWidth = 2.0; //笔触粗细
        context.beginPath();
        context.moveTo(x, y);
    },
    drawing(evt) {
        if (!context) return;
        let {
            x,
            y
        } = this.getXY(evt);
        context.lineTo(x, y);
        context.stroke();
    },
    endDraw(evt) {
        if (!context) return;
        context.closePath();
    },
    getXY(evt) {
        return evt.touches[0];
    },
    getCanvas(id) {
        return new Promise((reslove, reject) => {
            wx.createSelectorQuery().select('#' + id).fields({
                node: true,
                size: true,
            }).exec(function (res) {
                reslove(res[0]);
            })
        })
    },
    getImgPath(path) {
        return new Promise((reslove, reject) => {
            wx.getImageInfo({
                src: path,
                success(res) {
                    reslove(res);
                },
                fail(res) {
                    reject(res);
                }
            })
        })
    },
    showGates() {
        wx.navigateTo({
            url: '/pages/tour/gate/index?type=tour'
        });
    },
    startUpload() {
        let that = this;
        wx.canvasToTempFilePath({
            canvas: this.data.canvas,
            fileType: 'jpg',
            success: function (res) {
                that.setData({
                    tempUrl:res.tempFilePath
                });
                that.selectComponent("#upload").submitForm(res.tempFilePath);
            }
        })
    },
    statechange() {

    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let {
            action,
            id,
            mallId,
            title,
            picUrl,
            pid=0,
            tval=1
        } = options;
        // wx.showLoading({
        //   title: '加载中',
        // });
        this.setData({
            tval,
            pid,
            type: 'tour',
            gateId: id,
            gateName: decodeURIComponent(title),
            action,
            picUrl: app.globalData.ajaxUrl + '/images/' + picUrl,
            mallId
        }, () => {
            this.drawInit();
            if (action == 'capture') {
                //this.generalImage(picUrl);
            }
        })
    },
    generalImage(picUrl) {
        getBase64({
            path: picUrl
        }).then(res => {
            this.setData({
                picUrl: 'data:image/png;base64,' + res.data
            }, () => {
                wx.hideLoading()
            })
        })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})