- 当前 Bug 的表现（可附上截图）
点击生成后一是手上会出现字的重叠，
保存到相册中的图下部分是黑色
- 预期表现
如图一，只是没有字的重叠
- 复现路径
- 提供一个最简复现 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(); } }) } }) }) |
请高手指点，再此谢过！
overflow 的问题是原生组件的限制：
不能在父级节点使用
overflow: hidden来裁剪原生组件的显示区域要隐藏canvas的话，可以直接在 canvas 节点上使用 hidden 属性 或 使用 display: none 这个 CSS。
动态改变canvas高度可能会导致hidden失效，是个bug，我们修复
2. setData 和 draw 都是异步执行，可能你draw的时候canvas高度还没改变，导致图片高度出问题
嗯嗯，但是开发工具上是没有问题的
工具和客户端到底层实现有一定差异，仅供模拟调试，真实效果还需要以客户端为准
canvas签字后保存生成图片全部是黑色的了，但是在模拟器中生成的图片是正常的
你好，请提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
安卓 红米4x 微信6.6.7
苹果 7plus 微信6.6.5
开发者工具中都正常
代码片段
你好，反馈已收到，问题确认中，感谢反馈