這篇文章主要講解了“怎么在小程序中實現保存圖片組件功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么在小程序中實現保存圖片組件功能”吧！

在肥城等地區，都構建了全面的區域性戰略布局，加強發展的系統性、市場前瞻性、產品創新能力，以專注、極致的服務理念，為客戶提供做網站、網站建設 網站設計制作定制開發,公司網站建設,企業網站建設,品牌網站設計,營銷型網站建設,成都外貿網站建設,肥城網站建設費用合理。

思路

首先聲明下組件采用的是uniapp，具體實現了可以繪制圖片、繪制文字以及保存海報至相冊的基本功能，在開發中這些也完全夠用了。

通過canvas繪制海報。通過uni.canvasToTempFilePath 將繪制好的 canvas轉為圖片。通過uni.saveImageToPhotosAlbum 將本地臨時路徑的圖片保存至手機相冊中。而我的想法是將所有采用的方法全部封裝到組件中，只通過父組件去調用需要使用的方法和調整相關的參數即可。具體使用可以查看示例代碼

通過canvas繪制海報內容的順序先后問題

通過使用promise對象決定繪制海報內容的順序先后。promise.all()方法進行canvas最后一步的繪畫操作 context.draw()

注意uni.getImageInfo()

• 在繪制圖片 和 頭像時，組件通過uni.getImageInfo() 去獲取圖片的相關信息，調用該方法成功的前提是需要在微信小程序后臺配置download域名和request域名當然最好把uploadFile域名也一起配置，防止出差錯。但是官方給出的提示是配置download域名白名單即可，但是獲取不到圖片信息，這算是一個大坑了。

• 如果沒有進行相關配置，在調試時 或者 體驗版 正式版等 打開了vconsole調試工具。uni.getImageInfo() 是可以獲取到圖片信息的，一旦關閉了vconsole uni.getImageInfo() 將會fail， 也是個坑。

本組件方法，變量介紹

props

• canvasInfo Object （必需）

• canvasWidth 畫布寬度

• canvasHeight 畫布高度

• canvasId 畫布標識

• isFullScreen Boolean

• 為ture時表示畫布為手機屏幕全屏，canvasInfo設置的寬高將失效。

• 默認為 false

methods

• canvasInit(callback) canvas初始化，所有有關畫布canvas操作需在其回調函數操作。

• drawCanvasImage(context, src, _imageWidth, _imageHeight, dx, dy) 在canvas繪制一張圖片

• drawCircularAvatar(context, url, _circularX, _circularY, _circularR) 在canvas繪制一張圓形圖片

• drawText(options) 在canvas繪制單行、多行文本

• startDrawToImage(context, promiseArr, callback) 將canvas操作draw()進行繪制

• posterToPhotosAlbum(filePath) 保存至手機相冊

示例代碼

組件源碼

感謝各位的閱讀，以上就是“怎么在小程序中實現保存圖片組件功能”的內容了，經過本文的學習后，相信大家對怎么在小程序中實現保存圖片組件功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！