收藏
回答

canvas 无法生成长图?模拟器正常生成 超过4000 ios截屏放大 安卓白屏 是逻辑问题

<canvas id="canvas" type="2d" canvas-id="canvas" style="height:{{canvasHeight}}rpx"></canvas>
<canvas id="canvas1" type="2d" canvas-id="canvas1" style="height:{{canvasHeight}}rpx"></canvas>

 // 画布绘制&初始化画布
  drawCanvas(dom, name) {
    return new Promise((resolve, reject) => {
      const query = wx.createSelectorQuery().in(this)
      query.select(dom)
        .fields({ node: true, size: true })
        .exec(res => {
          const data = res[0];
          let canvas = data.node
          this._data[name] = canvas;
          const ctx = canvas.getContext('2d')
          canvas.width = data.width * dpr
          canvas.height = data.height * dpr
          // 绘制前清空画布
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.save();
          ctx.scale(dpr, dpr)
          resolve()
          console.log('init canvas', canvas.width, canvas.height)
        })
    })
  },
  // 绘制内容
  async drawContent(canvas, type = 1) {
    console.log('drawing content')
    console.time()
    const { checkListMap } = this._data;
    const ctx = canvas.getContext('2d')
    ctx.fillStyle = '#121C60';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    await this.drawImage(canvas, ctx, '/assets/workbench/w-joint-research-banner.png', 0, 0, 750 / ratio, 308 / ratio)
    this._data.yHeight = 308;
    this.drawTitle(ctx, `03.05 ~ 03.11|江浙|电新  第${type}张`)
    for (let key in checkListMap) {
      const { day, week, data } = checkListMap[key]
      this.drawTag(ctx, `${day} ${week}`, this._data.yHeight + 30);
      await data.forEach(item => {
        const { dayShow: time, record_name: title, other } = item;
        this.drawCard(ctx, {
          time,
          title,
          address: other.address,
          person: '',
          discuss: ''
        }, this._data.yHeight + 30, type)
      })
    }
    this.drawFooter(ctx, this._data.yHeight)
    console.log('draw canvas', checkListMap)
    console.timeEnd();
    console.log('draw content end')
  },
 // 绘制图片
  draw(dom, id) {
    return new Promise((resolve, reject) => {
      const { canvasHeight: cnavasheight } = this.data
      const { yHeight, canvasHeight } = this._data
      // const dpr = wx.getSystemInfoSync().pixelRatio
      // 是否超过一屏
      const isBeyond = yHeight > canvasHeight
      const height = isBeyond ? cnavasheight : canvasHeight
      // console.log('height', height, dom.height, dom.height / dpr)
      wx.canvasToTempFilePath({
        canvas: dom,
        // canvasId: id,
        width: 750 / ratio,
        height: 3000,
        // destWidth: dom.width,
        // destHeight: dom.height,
        success: (res) => {
          resolve(res.tempFilePath)
          wx.getImageInfo({
            src: res.tempFilePath,
            success: (res) => {
              console.log('getImageInfo', res)
            }
          })
          console.log('success', res)
        },
        fail: (err) => {
          reject(err)
        },
        complete: (res) => {
          // resolve(res.tempFilePath)
          console.log('complete', res)
        }
      }, this)
    })
  },
  // 生成海报
  generatePoster() {
    wx.showLoading({
      title: '生成中...',
    })
    // this.draw(this._data.canvas, 'canvas')
    console.log('----------------')
    Promise.all([this.draw(this._data.canvas1, 'canvas1')]).then(res => {
      wx.previewImage({
        current: res[0], // 当前显示图片的http链接
        urls: res // 需要预览res.tempFilePath的图片http链接列表
      })
      wx.hideLoading()
    })
  },

回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    2023-03-27

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2023-03-27
    有用
    回复 2
    • 小乐子
      小乐子
      2023-03-27
      目前是超出9个就会卡住不执行canvasToTempFilePath的 success 改成异步的就会被截取 同步就会卡住
      2023-03-27
      回复
    • 小乐子
      小乐子
      2023-03-28
      ?
      2023-03-28
      回复
  • 小乐子
    小乐子
    2023-03-27

    代码片段 https://developers.weixin.qq.com/s/J2Bfi1mK71HX

    微信版本 8.0.34

    苹果13 版本15.4.1

    2023-03-27
    有用
    回复
登录 后发表内容