收藏
回答

canvas导出图片

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 工具 6.6.7 2.0.9

使用canvas导出用户的图片,为什么得到的是一张黑底的图片?????

代码如下


ctx.drawImage(userInfo.avatarUrl, 0, 0, 230, 230)

ctx.draw(false, function() {

wx.canvasToTempFilePath({

width: 230,

height: 230,

canvasId: 'firstCanvas',

success: function(res) {

debugger

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success(res) {

wx.showToast({

title: "保存成功"

})

}

})

}

})

});


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

2 个回答

  • 枫落
    枫落
    2018-07-04

    setTimeOut 这个我知道,我也加的有,只是我生成的卡片在ios中都是白色背景,在安卓手机上就有可能是黑色背景,而且第一次进入页面画出的是空白的,退出重进第二次就能显示图片了,知道这是为什么吗?

    2018-07-04
    赞同
    回复 2
    • ゛钙小片へ
      ゛钙小片へ
      2018-07-04

      你现在是几个问题?

      1. 白色背景?黑色背景?你用的不是同一个图片做背景?

      2. 我之前也是  生成的是个透明的图  还有就是你canvas时候的顺序  可以先调图片 底图有了再绘 其他信息

      3. 调用接口时候的异步会影响绘图  还是顺序的问题


      2018-07-04
      回复
    • 枫落
      枫落
      2018-07-04回复゛钙小片へ

      好的,我先试一试,谢谢解答

      2018-07-04
      回复
  • ゛钙小片へ
    ゛钙小片へ
    2018-06-22

    你好  请问你找到原因了吗  我也遇到同样的问题 第一次生成图片的时候 是黑色的 透明图  但是 再生成一次 就好了……请问你的是什么问题啊!!!

    2018-06-22
    赞同
    回复 5
    • 小灬姜
      小灬姜
      2018-06-22

      真机需要先下载这用户图片,然后绘制导出

      2018-06-22
      回复
    • ゛钙小片へ
      ゛钙小片へ
      2018-06-22回复小灬姜

      下载了  但是 第一次就是个空白的 不知道为啥 再保存 就能生成了...郁闷..是异步啥的影响的吗?

      2018-06-22
      回复
    • ゛钙小片へ
      ゛钙小片へ
      2018-06-23

      好了

      2018-06-23
      回复
    • 枫落
      枫落
      2018-07-03

      我现在也碰到这个问题,能问一下是什么情况呢?

      2018-07-03
      回复
    • ゛钙小片へ
      ゛钙小片へ
      2018-07-04回复枫落


      /** 绘图 */
        drawCanvas: function (cvQRCodePath) {
          var that = this;
          const ctx = wx.createCanvasContext('myITCanvas')
          // 背景图
          ctx.drawImage(that.data.cvBgPath, 0, 0, 800, 1486)
          // 文字-title
          let [contentLeng, contentArray, contentRows] = that.textByteLength(that.data.goodDetail.goods_name, 33)
          ctx.setTextAlign('left')
          ctx.setFillStyle('#000000')
          ctx.setFontSize(40)
          let contentHh = 40 * 1.5;
          for (let m = 0; m < contentArray.length; m++) {
            ctx.fillText(contentArray[m], 80, 70 + contentHh * m)
          }
          // 商品大图-图片
          ctx.drawImage(that.data.cvImgPath, 0, 260 + contentHh, 800, 800)
          // 二维码-图片
          ctx.drawImage(cvQRCodePath, 56, (25 + 800 + 260 + contentHh), 290, 290)
          ctx.draw()
        },
        /** 保存朋友圈图片 */
        makeCvPhoto: function () {
          var that = this;
          wx.showLoading({
            title: '正在生成....'
          })
          wx.downloadFile({ // 二维码
            url: app.baseUrl + '[API路径]',
            header: {},
            success: function (res) {

              that.drawCanvas(res.tempFilePath);


             /** 重点关注这个setTimeOut ,还有就是 请求接口异步 在success回调里去执行一些操作 */


              setTimeout(function () {
                wx.canvasToTempFilePath({
                  canvasId: 'myITCanvas',
                  destWidth: 800,
                  destHeight: 1486,
                  fileType: 'png',
                  success: function (res) {
                    wx.saveImageToPhotosAlbum({
                      filePath: res.tempFilePath,
                      success(res) {
                        wx.hideLoading();
                        wx.showToast({
                          title: '保存成功'
                        });
                      },
                      fail() {
                        wx.hideLoading();
                        wx.openSetting();
                      }
                    })
                  }
                })

              }, 500)


            }
          })

        }



      2018-07-04
      回复