wx.getImageInfo({ src: "https://dewordapi.tongjideyu.com/share.png", success: res => { this.backgroundImagePath = res.path; const ctx = wx.createCanvasContext("myCanvas"); let info = wx.getSystemInfoSync(); console.log(info) ctx.drawImage(res.path, 0, 0, 750, 1206); ctx.setGlobalAlpha(1); ctx.setFontSize(95); ctx.setFillStyle("#AD89FF"); ctx.setTextAlign("left"); ctx.fillText("100", 297, 195); ctx.setFontSize(45); ctx.setTextAlign("center"); ctx.fillText("122", 200, 423, 81); ctx.setFillStyle("#AD89FF"); ctx.setTextAlign("center"); ctx.setFontSize(45); ctx.fillText("99", 587, 423, 144); ctx.setFontSize(28); ctx.setFillStyle("white"); let text = "Zollbeamtin,Flughafen,Chinese,Koffer,Moment,sprechen,Geschwister,chinesisch,Maschinenbau,wen(A),wen(A),Gemüse,Samstag,Rindfleisch,Augenblick,Lebensmittel"; let metrics = ctx.measureText(text); // ctx.fillText("Zollbeamtin", 100, 295.5); ctx.setTextAlign("left"); var startX = 104; var startY = 567; var lineWidth = 0; var lastSubStrIndex = 0; var linecount = 1 for (var i = 0; i < text.length; i++) { lineWidth += ctx.measureText(text[i]).width; if (lineWidth > 571) { ctx.fillText(text.substring(lastSubStrIndex, i), startX, startY); lineWidth = 0; lastSubStrIndex = i; startY += 70; } } console.log('start to draw..') var pointer = this ctx.draw(true, function (res) { console.log('done...') wx.canvasToTempFilePath({ canvasId: 'myCanvas', width: 750, height: 1206, destWidth: 750, destHeight: 1206, success: (res) => { let tempPath = res.tempFilePath pointer.imgSrc = tempPath wx.saveImageToPhotosAlbum({ filePath: tempPath, success: (res) => { console.log(res) pointer.showMask = true }, fail: (err) => { console.log(err) }, }) } }) }); } }); |
在canvas上画图，然后导出到相册，但是导出到相册的时候有一部分没了。
在iPhone 5上会出现这个问题，iPhone 6以及其它页面不会。
iphone5屏幕宽度不足 750px？
和屏幕的宽高是有关系的嘛？
比如，你canvas本来的宽高都是100%，假设手机屏幕的宽度只有700px。那你照着750px画的话，就有部分在画布外？我猜的~
看了下 iphone5的宽度是 640px，我从你下面的图截640px的宽度，结果是
由此推断，我说的可能是对的
😁
我在想是不是忽略这个机型了呢？
还有种方法，canvas隐藏，只显示生成的图片，canvas再大，都不会显示出来，而生成的img大小自己控制
我也是试过这种思路的， 你的canvas隐藏是
吗？我试过这样，但是图片上是空白。
不是，是overflow：hidden，我的canvas在保存图片按钮下面，让 『图片 + 按钮』的高度100vh，把canvas挤出去就行
我目前是这么做的，overflow:hidden。
我现在的这个canvas生成的图片，除了数字还有德语字母是动态的，其余的是我事先做好的一个图片，空白图片，所以事先就已经固定了大小。
举手抢答！也可以绝对布局，把canvas放z-index在很底下~ 或者直接放到屏幕外面去，比如 left:800rpx
canvas对z-index不太友好，left倒是可以