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

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

思路

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

通過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) 保存至手機相冊

示例代碼

組件源碼

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