uni-app canvasToTempFilePath畫布問題

最近在做一個截圖功能，發現uni-app分享自定義圖片還是有點問題

APP端的分享和微信小程序分享還是有點不同的，這里APP測試用的是安卓手機

 

下面列舉下我遇到的問題

1.draw函數的回調不執行

　　　　一般都是ctx.draw(false,()=>{})的方式執行，但是打印半天都不進入，發現是回調函數的問題，查了一會，最終還是在微信社區找到了解決方案，那就是強制執行函數

　　ctx.draw(false,(()=>{})())

2.canvasToTempFilePath生成的圖片很模糊

　　　　這在微信小程序也是存在的，方案大都是W450-H200變成W900-H400的放大畫布像素，而我在uni-app試了一點變化都木有還是模糊，還去小程序測了個demo,發現小程序沒問題，調大了也變清晰了

　　就很納悶，然后瘋狂找了半天，uniapp社區方案還是太少了，然后又去微信社區，發現有人跟我碰到一樣的問題，作者下面回了句“我的是圖片太大的原因”，剛開始感覺應該不是，后面還是試了一下，

　　真的是圖片大的原因。

　　　　然后我就將畫布W450-H200變成W225-H100，縮小畫布0.5倍的像素，為了減少更多體積，我還用compressImage壓縮了一遍，經過微調后，分享的圖片真就清晰了好多，如果原圖100%，這個能達到

　　85%的清晰，后面嘗試繼續縮小，那就不行了，開始模糊起來了。

　　tip:這里雖然分享圖片雖然清晰了，但如果需要展示的話，展示圖片就模糊了，所以我就又生成了一張圖片用於展示，是麻煩了點0.0

3.canvasToTempFilePath生成的圖片臨時路徑

　　　　_doc/temp 這樣的格式，不像小程序http那種臨時路徑,我用image組件和previewImage打開都是黑的，我以為是要轉成file，發現沒啥用，最后想了下以前畫布生成圖片的情況，那就是畫布沒畫完，然

        后趕緊去加了個延遲，完美，圖片出來了。

　　　　　　　　　　ctx.draw(false, (() => {
                    setTimeout(()=>{
                        uni.canvasToTempFilePath({
                            canvasId: 'myCanvas',
                            destWidth: _this.cropW*_this.canvasScale*2, //分享圖片尺寸=畫布尺寸1*縮放比0.5*像素比2
                            destHeight: _this.cropH*_this.canvasScale*2,
                            quality:1,
                            fileType:'jpg',
                            success: (res) => {
                                // console.log(res,'success')
                                uni.compressImage({
                                    src: res.tempFilePath,
                                    quality: 100,
                                    success: res => {
                                        const share_img=res.tempFilePath
                                        uni.canvasToTempFilePath({
                                            canvasId: 'myCanvas',
                                            destWidth: _this.cropW*2,   //展示圖片尺寸=畫布尺寸1*像素比2
                                            destHeight: _this.cropH*2,
                                            quality:1,
                                            fileType:'jpg',
                                            success: (res) => {
                                                // console.log(res,'success')
                                                uni.hideLoading()
                                                const img = res.tempFilePath
                                                // _this.show = false
                                                _this.$emit('confirm', {
                                                    share_img,
                                                    img
                                                })
                                            },
                                        }, _this);
                                    }
                                })
                            },
                        }, _this);
                    },500)
                })())

 

 

感覺還是要記下，不然以后真的忘了。