import { promiseWxApi } from '../../utils/util.js'

Page({
  onLoad(options) {
    wx.createSelectorQuery()
      .select('#canvas1')
      .fields({ node: true, size: true })
      .exec((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.fillStyle = '#ffffff'
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        // 绘制作品图片
        this.renderArtworkImg(canvas, 'https://picasso.pixcity.net/images/artwork/3bxjoy02kz8c320d/a083a60ce340f3bb10927907abb4b5ea/original/wx5e78935c81104646.o6zajszne4uvrcaapzm8n6bsvfni.muhsjfgntmym3ad2f0e5a40aa6b94348bf333e405bf6.jpg')
      })
  },

  async renderArtworkImg(canvas, imgPath) {
    const context = canvas.getContext('2d')
    const { tempFilePath } = await promiseWxApi(wx.downloadFile)({
      url: imgPath
    })
    const { width: imgWidth, height: imgHeight } = await promiseWxApi(wx.getImageInfo)({
      src: tempFilePath
    })
    const image = canvas.createImage()
    image.onload = () => {
      context.drawImage(image, 0, 0, imgWidth, imgHeight, 0, 0, canvas.width, 100)
    }
    //  注意只能是本地图片
    image.src = tempFilePath
  }
})