最近在做一个截图功能，发现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)
                })())

 

 

感觉还是要记下，不然以后真的忘了。