收藏
回答

急急急,求解答,canvas生成小程序海报时,背景图显示,小程序码不显示?

canvasToTempFilePath绘制图片到画布上(有背景图和小程序码以及显示文案),小程序码 真机不显示,开发工具显示,


真机返回的是:wxfile://tmp_ef7d896c70dbbba1bedbb50c83f6ee1f.png

开发工具返回的是:http://tmp/wxd09bd3b7e8615d34.o6zAJs1nxb9ingS3FdkyhKJfJIrw.i3SPftwNzzsf83942aacac4a02fd6228083d3e2d1acd.png

画布中的小程序码是用base64格式的,是要替换成网络图片还是本地图片?


 wx.request({
          url: 'user/getQRCode',
          header: {
            'content-type': 'application/json'
          },
          data: {
            scene: id,
            page: 'pages/shop/detail/detail',
            width: '430px',
          },
          method: "Post",
          success: function (res) {
            if (res.statusCode == '200') {
              console.log('获取二维码返回结果:' + res.data.data);
              that.data.skuBillUrl = "data:image/PNG;base64," + res.data.data.qrCode;
              that.drawImage();
            }
          }, fail: function () {
            wx.showModal({
              title: '异常',
              content: '请求异常,请下拉刷新'
            })
          }, complete: function () {
            wx.hideLoading()
          }
        })


drawImage():

      // 底图
      ctx.drawImage('../../../pages/shop/detail/img/product.png', 0 * xs, 0 * xs, ImageBGWidth, ImageBGHeight);
      // 文字
      ctx.setFillStyle('#000000');  // 文字颜色:黑色
      ctx.setFontSize(26 * xs);         // 文字字号:22px
      ctx.drawImage(that.data.skuBillUrl, CodeOffsetX, CodeOffsetY, 160 * xs, 160 * xs);
      ctx.fillText('姓名:' + skuBill.name, TextOffsetX, TextOffsetY);
      ctx.fillText('电话:' + skuBill.phone, TextOffsetX, TextOffsetY + 40 * xs);
      ctx.setTextAlign('left');  // 文字居中
      ctx.draw(false, setTimeout(() => {
        console.log(3)
        //生成分享图
        wx.canvasToTempFilePath({
          canvasId: 'sku-bill-canvas',
          success: function (res) {
            console.info(res.tempFilePath)
            that.setData({
              skuBillPreUrl: res.tempFilePath,
              showCanvas: false
            })
            //海报预览图
            app.globalData.skuBillPreUrl = res.tempFilePath
            console.info('skuBillPreUrl:' + that.data.skuBillPreUrl)
          }, fail: function (res) {
            console.info(res);
          }
        }, that)
      }, 300))


在开发工具上 正常显示背景以及小程序二维码

在真机上 正常显示背景,小程序二维码不显示

最后一次编辑于  2020-06-05
回答关注问题邀请回答
收藏

3 个回答

  • Mr.Dolphin
    Mr.Dolphin
    2020-06-05

    已解决,https://www.cnblogs.com/kaiye/p/9909304.html

    2020-06-05
    有用 2
    回复
  • 养猪大户
    养猪大户
    2020-06-05

    我是用的网络图片,可以正常绘制。像这种问题,你对比试验一下就可以了。

    2020-06-05
    有用
    回复
  • 终极ZLY
    终极ZLY
    2020-06-05

    没用过base64的,方便的话,传到服务器用网络图片吧

    2020-06-05
    有用
    回复 1
    • Mr.Dolphin
      Mr.Dolphin
      2020-06-05
      好的,我试试 谢谢
      2020-06-05
      回复
登录 后发表内容
问题标签