收藏
回答

canvas组件绘图过后下载的图片不显示?

js代码
async getImage (url,width, height) {  
    const off = wx.createOffscreenCanvas({type:'2d'})
    const image = off.createImage()   
    await new Promise((resolve, reject)=>{      
      image.onload = resolve  // 绘制图片逻辑
      image.src = url
    })
    return image
 
  },
    aaa(){
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const date = `${year}${month}${day}日`;
      const no = `F${year}182006`;
      const that=this;
      wx.createSelectorQuery().select('#myCanvas').fields({ nodetruesizetrue }).exec((cres) => {
        //在这里可以下获取到canvas组件了,然后创建成画板画布。
          console.log(cres);
          var rect = cres[0]
          console.log(rect)
          var textCanvas = rect.node  // 重点1
          var ctx = textCanvas.getContext('2d')  // 重点2//创建画布
          that.getImage("../../images/card.jpg",800,1000).then(image=>{
            ctx.drawImage(image, 00,1000,800)
          })
          ctx.font ='28px';
          ctx.fillStyle='#000';
          ctx.fillText(`同志在 ${year} 年 1 月 1 日至 ${month} 月 ${day} 日参加了`240380);
          ctx.fillText(`编号:${no}`,170 , 640);
          ctx.fillText(`${date}`670640);
          wx.canvasToTempFilePath({
            canvas:textCanvas,
            success(res) => {
              console.log('成功生成临时文件路径:', res.tempFilePath);
              wx.downloadFile({
                url: res.tempFilePath,
                success(downloadRes) => {
                  if (downloadRes.statusCode === 200) {
                    console.log(downloadRes)
                    wx.saveFile({
                      tempFilePath: downloadRes.tempFilePath,
                      success(saveRes) => {
                        console.log(saveRes)
                        console.log('证书保存路径:', saveRes.savedFilePath);
                        wx.showToast({
                          title'证书下载成功',
                          icon'success',
                        });
                      },
                      fail(err) => {
                        wx.showToast({
                          title'证书下载失败'+err,
                          icon'none',
                        });
                      },
                    });
                  }
                },
                fail(err) => {
                  wx.showToast({
                    title'证书下载失败'+err,
                    icon'none',
                  });
                  console.log(err);
                },
              });
            },
            fail(err) => {
              console.error('生成临时文件路径失败:', err);
              wx.showToast({
                title'证书生成失败',
                icon'none',
              });
            },
          });
        })
    },

wxml:
<canvas id="myCanvas" type="2d" style="width:1000px;height:800px"></canvas>

结果:

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

1 个回答

  • 启年
    启年
    09-19

    做个代码片段吧

    09-19
    有用 1
    回复 3
    • King.
      King.
      09-19
      https://developers.weixin.qq.com/s/IEtsqkm47eUV
      09-19
      回复
    • 启年
      启年
      09-20回复King.
      找了下问题, 因为你在画布上绘制被填充的文本的 X和y 坐标,超出了画布的范围,导致保存图片没有成功,我改了个代码片段你看下https://developers.weixin.qq.com/s/17e47lmv7KUg

      还有,看到你demo 里边写的感觉你是新老版本的canvas 写法混用了,你用的是新版Canvas 2D,但是还用了旧版本的CanvasContext
      09-20
      2
      回复
    • King.
      King.
      09-20
      ok,感谢
      09-20
      回复
登录 后发表内容