公告列表
公告列表
收藏
回答

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();
            }
          })
        }
      })
    })

请高手指点，再此谢过！

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

4 个回答

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

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

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


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

    2019-03-18
    有用
    回复
  • 晨
    晨
    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
      赞
      回复
  •  
     
    2020-11-23

    canvas签字后保存生成图片全部是黑色的了，但是在模拟器中生成的图片是正常的

    2020-11-23
    有用
    回复
  • 是小白啊
    是小白啊
    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
      赞
      回复
请 登录 后发表内容
相关文档