<template>
  <div class="container">
    
    <canvas canvas-id="shareCanvas" style="width:480rpx;height:800rpx" ></canvas>
    <button @click="test">保存图片到手机相册</button>
  </div>
 
</template>

<script>

export default {
  data () {
    return {
      savedImgUrl:""
    }
  },

  methods: {
    test(){

//通过使用wx.getImageInfo这个API来下载一个网络图片到本地（并可获取该图片的尺寸等其他信息），然后调用ctx.drawImage方法将图片绘制到画布上，填满画布
      wx.getImageInfo({

        src:"http://www.mangowed.com/meinvImage/1-11111F01612.jpg",
        success:res=>{
          console.log(res)

//在画布上继续绘制一段文字，可能是一篇文章的作者、文章的标题和内容。
          const ctx = wx.createCanvasContext('shareCanvas')
          ctx.drawImage(res.path, 0, 0, 240, 400)
           ctx.setTextAlign('center')    // 文字居中
            ctx.setFillStyle('#000')  // 文字颜色：黑色
            ctx.setFontSize(22)         // 文字字号：22px
            ctx.fillText('我不知道：xcq', 22, 22)

//小程序码

const qrImgSize = 180
    ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)
    ctx.stroke()
    ctx.draw()

            ctx.stroke()
            ctx.draw()
           var that = this;
            setTimeout(function () {

//wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum这两个API保存到手机，要的流程就是先通过wx.canvasToTempFilePath将上绘制的图像生成临时文件的形式，然后再通过wx.saveImageToPhotosAlbum进行保存到系统相册的操作。
                wx.canvasToTempFilePath({
                  x: 0,
                  y: 0,
                  width: 200,
                  height: 370,
                  destWidth: 1035,
                  destHeight: 1560,
                  canvasId: 'shareCanvas',
                  success: function (res) {
                  console.log(res, '保存')

//保存到手机相册
                  wx.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: res=> {
                    console.log(res)
                  }
                })
                  }
                })
            }, 1000)
      }

    })

    }
  }
}
</script>