收藏
回答

canvas生成的图片为什么是透明的?

在其他的地方打开就是黑色的,我设置canvas的背景色是白色的,难道填充不了?

<canvas canvas-id='share' style="display:{{canvasbox}};width:750rpx;height:1334rpx;margin:auto;background-color:rgba(255,255,255,1);"></canvas>

  
            // 将生成的canvas图片,转为真实图片
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 375,
                height: 667,
                destWidth: 375,
                destHeight: 667,
                canvasId: 'share',
                success: function (res) {
                    let shareImg = res.tempFilePath;
                    console.log("shareImg:", shareImg)
                    // 获取用户是否开启用户授权相册
                    wx.getSetting({
                        success(res) {
                            // 如果没有则获取授权
                            if (!res.authSetting['scope.writePhotosAlbum']) {
                                wx.authorize({
                                    scope: 'scope.writePhotosAlbum',
                                    success() {
                                        wx.saveImageToPhotosAlbum({
                                            filePath: shareImg,
                                            success(res) {
                                                console.log("保存失败:", res)
                                                wx.hideLoading()
                                                wx.showToast({
                                                    title: '保存成功'
                                                })
 
                                            },
                                            fail(res) {
                                                console.log("保存失败:", res)
                                                wx.hideLoading()
                                                wx.showToast({
                                                    title: '保存失败',
                                                    icon: 'none'
                                                })
 
                                            }
                                        })
                                    },
                                    fail() {
                                        // 如果用户拒绝过或没有授权,则再次打开授权窗口
                                        //(ps:微信api又改了现在只能通过button才能打开授权设置,以前通过openSet就可打开,下面有打开授权的button弹窗代码)
                                        that.setData({
                                            openSet: true
                                        })
                                    }
                                })
                            } else {
                                // 有则直接保存
                                wx.saveImageToPhotosAlbum({
                                    filePath: res.tempFilePath,
                                    success() {
                                        console.log("保存成功:", res)
                                        wx.hideLoading()
                                        wx.showToast({
                                            title: '保存成功'
                                        })
                                    },
                                    fail(res) {
                                        console.log("保存失败:",res)
                                        wx.hideLoading()
                                        wx.showToast({
                                            title: '保存失败',
                                            icon: 'none'
                                        })
                                    }
                                })
                            }
                        }
                    })
                },
                fail: function (res) {
                    console.log("生成图片失败!", res)
                }
            })
     


最后一次编辑于  11-19
回答关注问题邀请回答
收藏

3 个回答

  • 杭州弧途科技有限公司
    杭州弧途科技有限公司
    11-18

    使用这个吧。

    https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013

    11-18
    赞同 1
    回复
  • ★韓★
    ★韓★
    11-19


    const ctx = wx.createCanvasContext('share');

    ctx.fillStyle = "#ffffff";


    11-19
    赞同
    回复 8
    • Fanacr
      Fanacr
      11-19
      试了不行,要找不到原因我只能放个白色的图片了
      11-19
      回复
    • ★韓★
      ★韓★
      11-19回复Fanacr
      //是在这里加上面的代码?
      ctx.draw(true, function () {
                //回调方法
                //console.log('成功绘制');
                wx.canvasToTempFilePath({
                ......
                ......
      11-19
      回复
    • Fanacr
      Fanacr
      11-19回复★韓★
      对的
      11-19
      回复
    • ★韓★
      ★韓★
      11-19回复Fanacr
      //换成这样试试,再不行就不知道了O(∩_∩)O
      const ctx = wx.createCanvasContext('share');
      ctx.clearRect(0, 0, 375, 667);
      ctx.fillStyle = "#ffffff";
      ctx.fillRect(0, 0, 375, 667);
      11-19
      1
      回复
    • ★韓★
      ★韓★
      11-19回复Fanacr
      //或者在这里再加个fileType: 'jpg' 保存为jpg格式的图片
      wx.canvasToTempFilePath({
                      x: 0,
                      y: 0,
                      width: 375,
                      height: 667,
                      destWidth: 375,
                      destHeight: 667,
                      fileType: 'jpg'
      11-19
      回复
    查看更多(3)
  • liu志远
    liu志远
    11-19

    可能附上你的代码片段别人才比较容易帮忙查

    11-19
    赞同
    回复 1
    • Fanacr
      Fanacr
      11-19
      贴了
      11-19
      回复
问题标签