小程序使用 canvas 繪制圖片

需求分析： 用戶需要分享小程序卡片到朋友圈；

實現(xiàn)方式：小程序生成小程序碼前后端都可以實現(xiàn)；

前端實現(xiàn)思路：從服務端拿回數(shù)據(jù)后利用 canvas 繪制成圖片；

注意事項

1、小程序 canvas 繪制無法直接使用網(wǎng)絡圖片，需要使用 wx.downloadFile 方法，將返回的本地路徑繪制到 canvas ，并且
圖片路徑需要轉成服務端地址或者你的本地地址，通過 wx.downloadFile 方法得到一個微信的臨時地址，這樣做的目的是解決跨
域問題

2、拿到數(shù)據(jù)后 canvas 創(chuàng)建實例需要注意當前是否使用自定義 canvas 組件，如果是的話需要傳入組件實例 this，繪制過程略，
完成后調用 wx.canvasToTempFilePath 方法得到繪制的圖片

3、canvas 在小程序繪制文字截取無法準確計算文字寬度，h5 可以調用 CanvasRenderingContext2D.measureText(text) 這
個 API，可以返回一個TextMetrics對象，通過每個字符寬度的不斷累加，精確計算哪個位置應該可以換行


4、該 canvas 無法復用
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容