收藏
回答

canvas保存生成图片部分是黑色了

问题模块 框架类型 问题类型 操作系统版本 手机型号 微信版本
客户端 小程序 Bug 安卓7.0 红米note4x 6.6.7

- 当前 Bug 的表现(可附上截图)

  1. 点击生成后一是手上会出现字的重叠,

  2. 保存到相册中的图下部分是黑色


- 预期表现

如图一,只是没有字的重叠

- 复现路径


- 提供一个最简复现 Demo

<view style='width:0px;height:0px;overflow:hidden;'>
<canvas canvas-id="myCanvas" style='width:375px;height:{{totheight}}px;'>
</canvas>
</view>

上面这个代码是想隐藏canvas,但会出现字的重叠,说明并么有实现

const ctx = wx.createCanvasContext('myCanvas')
 
    ctx.drawImage(that.data.bgimg, 0, 0, that.data.screenwidth, that.data.useheight)
 
    ctx.drawImage("../../images/aaa.png", 285, 10, 80, 83)
 
    ctx.setFontSize(14);
    ctx.setFillStyle('#' + that.data.quot.color);
    ctx.fillText(that.data.date['0'] + ' / ' + that.data.date['1'], 292,30);
 
    ctx.setFontSize(32);
    ctx.setFillStyle('#' + that.data.quot.color);
    ctx.fillText(that.data.date['2'] , 307, 65);
 
    ctx.setFontSize(16);
    ctx.setFillStyle('#' + that.data.quot.color);
    ctx.fillText(that.data.date['3'],299,85);
 
   
    var content = that.data.quot.content;
    var chr = content.split("");
 
    var temp = "";
    var row = [];
    ctx.setFontSize(17);
    ctx.setFillStyle('#000000');
    for (var a = 0; a < chr.length; a++) {
      if (ctx.measureText(temp).width < 355) {
        temp += chr[a];
      }
      else {
        a--;
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);
    for (var b = 0; b < row.length; b++) {
      ctx.fillText(row[b], 10, that.data.useheight + 30 + b * 30, 355);
      var totheight = that.data.useheight + 100 + b * 30;
    }
    that.setData({
      totheight: totheight
    })
    ctx.draw(true,function(res){
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        fileType: 'jpg',
        success: function (res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              wx.hideLoading();
              wx.showToast({
                title: '海报已存到相册',
              })
            },
            fail() {
              wx.hideLoading();
            }
          })
        }
      })
    })

请高手指点,再此谢过!

最后一次编辑于  2018-08-23  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • Eric Huang
    Eric Huang
    置顶回答03-18

    overflow 的问题是原生组件的限制

    • 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域


    要隐藏canvas的话,可以直接在 canvas 节点上使用 hidden 属性 或 使用 display: none 这个 CSS。

    03-18
    赞同
    回复
  • 是柿子啊
    是柿子啊
    2018-08-23

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-08-23
    赞同
    回复 2
    • 金冈
      金冈
      2018-08-24

      安卓 红米4x  微信6.6.7

      苹果 7plus   微信6.6.5

      开发者工具中都正常

      代码片段

      2018-08-24
      回复
    • 是柿子啊
      是柿子啊
      2018-08-24回复金冈

      你好,反馈已收到,问题确认中,感谢反馈

      2018-08-24
      回复
  • 晨
    2018-08-24
    1. 动态改变canvas高度可能会导致hidden失效,是个bug,我们修复


    2. setData 和 draw 都是异步执行,可能你draw的时候canvas高度还没改变,导致图片高度出问题

    2018-08-24
    赞同
    回复 2
    • 金冈
      金冈
      2018-08-25

      嗯嗯,但是开发工具上是没有问题的

      2018-08-25
      回复
    • 晨
      2018-08-25回复金冈

      工具和客户端到底层实现有一定差异,仅供模拟调试,真实效果还需要以客户端为准

      2018-08-25
      回复