用小程序做過(guò)畫(huà)圖工具的小伙伴，可能都遇到過(guò)這個(gè)問(wèn)題，程序在安卓手機(jī)和電腦上面都沒(méi)有問(wèn)題，但是同樣的代碼在蘋(píng)果手機(jī)下就出現(xiàn)了該問(wèn)題：wx.canvasToTempFilePath：fail on image。
網(wǎng)上有很多解決方案，比如不能加隱藏none，hidden等。這些CSS設(shè)置的初衷會(huì)為了隱藏畫(huà)布，與畫(huà)圖失敗沒(méi)有關(guān)系。如果想要隱藏畫(huà)布也可以用另一種方案：讓畫(huà)布的位置固定在屏幕之外。
<canvas canvas-id="shareCanvas" class='shareCanvas' style='left:9000px;width:1200px;height:1500px;position:fixed;'>
</canvas>出現(xiàn)fail no image真正的原因在于畫(huà)布canvas的大小超過(guò)了蘋(píng)果手機(jī)所能設(shè)置的大小界限。
canvas有自身的width,height屬性來(lái)控制尺寸，而且不同的設(shè)備擁有不同的尺寸。
比如：
蘋(píng)果手機(jī)不能超過(guò)4096*4096像素；
安卓不能超過(guò)8192*8192像素；
在PC,CHROME瀏覽器，360瀏覽器，不能超過(guò)16384*16384像素；
這些尺寸限制有待進(jìn)一步確認(rèn)，因?yàn)槲以跍y(cè)試中發(fā)現(xiàn)，蘋(píng)果手機(jī)設(shè)置成4096也存在失敗的概率。
所以，在寫(xiě)程序的時(shí)候，可以把想要畫(huà)的圖片同比例縮小，畫(huà)布尺寸也設(shè)置小，這樣就不會(huì)出現(xiàn)問(wèn)題。
另一個(gè)問(wèn)題，畫(huà)布沒(méi)問(wèn)題了，同比例縮小之后，畫(huà)出來(lái)的圖片不久失真了嗎？不會(huì)，給你解決方案：畫(huà)完之后同比例放大。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-488225.html
ctx.draw(false, () => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.xp,
height: that.data.defaultHeight,
// 同比例放大，決定了保存圖片的清晰程度
destWidth: that.data.xp * 2.5,
destHeight: that.data.defaultHeight * 2.5,
canvasId: 'shareCanvas',
fileType: 'jpg',
// 圖片質(zhì)量
quality: 1,
success: function (res) {
// 獲得圖片臨時(shí)路徑
let mixImage = res.tempFilePath;
that.setData({
mixImage: mixImage,
imageWidth: that.data.xp
});
wx.hideLoading();
}
});
});看實(shí)例，微信搜索小程序：圖作妖文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-488225.html
到了這里，關(guān)于解決蘋(píng)果手機(jī)wx.canvasToTempFilePath：fail on image問(wèn)題，canvas的那些坑，圖片失真問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
