html部分

<canvas style="width: 100%;height: 450px; " canvas-id="firstCanvas"></canvas>
<img :src="imgSrc" :show-menu-by-longpress='true' class="new-image" alt="">

js部分

    generateImage() {
                const that=this;
                const ctx = wx.createCanvasContext('firstCanvas')
                ctx.drawImage('../../static/img/old-img.jpg', 0, 0, 200, 200)
                ctx.setFontSize(12)
                ctx.fillText('正方', 5, 5)
                ctx.fillText('反方', 10, 10)
                ctx.draw(true, (ret) => {
                    setTimeout(() => {
                        uni.canvasToTempFilePath({
                            canvasId: 'firstCanvas',
                            fileType: 'png',
                            quality: 1, //图片质量
                            success(res) {
                                console.log(res.tempFilePath)
                                that.imgSrc = res.tempFilePath;
                            }
                        })
                    })
                })

                // uni.getImageInfo({
                //  src: "http://game.gtimg.cn/images/yxzj/act/a20160510story/relavance/heroes/hero48.jpg",
                //  success(res) {
                //      console.log(res.path) 
                //      var ctx = uni.createCanvasContext(
                //          "firstCanvas") // 使用画布创建上下文 图片
                //      ctx.drawImage(res.path, x, y, 100, 100) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
                //      ctx.save(); //保存
                //      ctx.draw() //绘制

                //      // ctx.fillText("内容", 240, 40); //文字内容、x坐标，y坐标
                //      // ctx.font = 'normal 20px STXingkai'; // 字体
                //      // ctx.setFontSize(10) //设置字体大小，默认10
                //      // ctx.setFillStyle('#DD524D') //文字颜色：默认黑色
                //      // ctx.fillText("width:" + ctx.measureText(that.sent[0]).width, 50, 50) //显示文字宽度
                //  }
                // })
            },