問題總結：

    1，canvas生成的圖片隱藏不了（下文解決）

    2，網路圖片開發工具顯示但是真機顯示不了 （下文解決）

    3，canvas生成的圖片清晰度問題 jpg （圖片的質量，目前僅對 jpg 有效。取值範圍為 (0, 1]，不在範圍內時當作 1.0 處理）

    4, 圖片等比例根據規定最大尺寸進行縮放 保證原圖能在規定區域顯示完全（我們的需求 也有要擷取圖片部分顯示的要求）

生成前的效果：

生成後的效果

wxml檔案程式碼部分

wxss檔案程式碼部分

我第一次的寫法是下面這種，這樣儲存的時候能捕獲到canvas還能不在頁面中顯示出來

但是在全面屏手機上在頁面最下面出現了生成圖片，如下頁尾底部出現了圖片我明明在wxss中 width:0 height:0 overflow:hidden

最後我的解決辦法是wxss修改成：

簡單暴力哈哈  （嘗試過z-index 但是不行的微信小程式裡面原生元件最高階不生效的）

js部分

     生成圖片那部分

然後用 context.drawImage api就可以完成了。具體的畫圖去查具體的api很方便的

我遇到過一個小問題就是 網路地址圖片直接drawImage在開發工具顯示正常但是真機不顯示。需要把網路圖片轉成本地呼叫下圖標出來的小程式api，然後就可以在真機和工具李看到了

下載圖片：