这两天遇到了一个类似的问题,也是canvas绘制的图片在其他机型能正常绘制,但是到了三星的个别机型上就不显示的问题,经过多轮定位最终发现问题出在一个优化策略上 canvas绘制图片时有些情况下会被压缩变糊,为了解决变糊的问题,很多人会先按照屏幕的设备像素比把画布放大后再缩小,而当放大的比例超过3.75这个临界值的时候,canvas所绘制的图片就不会显示了。 我看评论区很多人说调低屏幕的分辨率后就正常了,感觉可以往这个方向排查一下,也是奇葩...之前处理过不少因为设备老旧导致的兼容问题,第一次遇到因为设备太好,屏幕像素比太高导致的问题...
小程序canvas绘制图片显示不完全生成可用于分享的图片时,在三星S6 edge+机型上,存在图片绘制不完全的问题,其他安卓机型以及苹果都正常。 [图片][图片] 如下是代码片段 ··· drawImage (bg, avatar, qrcode, nickname) { const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('#ffffff') ctx.fillRect(0, 0, 750, 1334) // 绘制背景 ctx.drawImage(bg, 0, 0, 750, 1334) // 绘制文字 ctx.setFontSize(30) ctx.setFillStyle('#202020') ctx.setTextAlign('center') ctx.setTextBaseline('top') ctx.fillText(nickname, 375, 509) ctx.setFillStyle('#606060') ctx.setFontSize(36) const text = this[this.mode + 'Text'] ctx.fillText(text[0], 375, 613) ctx.fillText(text[1], 375, 683) // 绘制小程序码 // ctx.drawImage(qrcode, 254, 852, 243, 243) // 绘制头像 ctx.save() ctx.beginPath() ctx.arc(375, 415, 70, 0, 2 * Math.PI) ctx.setStrokeStyle('#ffffff') ctx.stroke() ctx.clip() ctx.drawImage(avatar, 305, 345, 140, 140) ctx.restore() // 提交绘制 ctx.draw() } async canvasToImage () { const tempUrl = await wepy.canvasToTempFilePath({ x: 0, y: 0, width: 750, height: 1334, destWidth: 750, destHeight: 1334, canvasId: 'myCanvas' }) this.tempUrl = tempUrl.tempFilePath this.$apply() } ··· 即使只绘制背景图,其他什么都不画也是这样子,不知道大家是否遇到过此类问题
2024-04-01