• 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)
                    })())

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

  • 相关阅读:
    mat工具记录一次full gc的过程
    2021年官网下载各个版本JDK最全版与官网查阅方法
    如何用vmkping命令调试vsphere环境中的VMkernel网络连接(ISCSI 开启巨帧)
    vsphere 虚拟机的迁移,冷迁移,vmotion(热迁移)
    VMkernel 级别的 TCP/IP 堆栈解释
    Ubuntu/Linux 开机运行指定的命令/自动运行命令
    桌面信息软件Desktop Info配置
    Windows10下插入USB串口设备后鼠标跳屏问题——Microsoft Serial Ballpoint
    Windows桌面配置常用软件总结
    安装Linux双系统取消快速启动,为什么在双启动时禁用Windows 8上的快速启动?
  • 原文地址:https://www.cnblogs.com/dongzhi1111/p/14044739.html
Copyright © 2020-2023  润新知