uni-app 2.8.11 canvasToTempFilePath调用之后无反应

uni-app 2.8.11 canvasToTempFilePath调用之后无反应

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：iOS

手机系统版本号：iOS 13.4

手机厂商：苹果

手机机型：iphone 7 plus

页面类型：vue

打包方式：云端

示例代码：

<template>  
    <view class="current-view">  
        <button @click="chooseImg" type="default">选择图片</button>  
        <canvas ref="canvas" class="canvas-img" canvas-id="drawImg" :disable-scroll="false"></canvas>  
        <button type="primary" @click="exportImg">导出</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                canvas: null  
            }  
        },  
        methods: {  
            chooseImg() {  
                uni.chooseImage({  
                    sizeType: 'compressed',  
                    success: res => {  
                        this.canvas.drawImage(res.tempFilePaths[0],0,0, 110,110);  
                        this.canvas.draw();  
                    }  
                })  
            },  
            exportImg() {  
                uni.canvasToTempFilePath({  
                    canvasId: 'drawImg',  
                    success: () => {  
                        uni.showToast({  
                            title: '导出成功',  
                            icon: 'none'  
                        })  
                    },  
                    fail: () => {  
                        uni.showToast({  
                            title: '导出失败',  
                            icon: 'none'  
                        })  
                    }  
                })  
            }  
        },  
        mounted() {  
            this.canvas = uni.createCanvasContext('drawImg', this);  
        }  
    }  
</script>  

<style>  
    .current-view {  
        height: 100vh;  
    }  

    .canvas-img {  
        width: 200rpx;  
        height: 200rpx;  
        background-color: #007AFF;  
    }  
</style>

更多关于uni-app 2.8.11 canvasToTempFilePath调用之后无反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

仅iOS出现此问题吗？安卓是否正常？ fail 是否触发？

更多关于uni-app 2.8.11 canvasToTempFilePath调用之后无反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


fail不触发,就调用之后就没反应了，从这个看来，我2.8.8是可以正常使用，2.8.11则不可以，所以我比较怀疑是这次更新导致的问题。另外，这边只是测试了iOS

回复 LeoHuang: 刚测试了一下未复现问题，你新建一个工程调用看看能复现此问题吗？

回复 DCloud_UNI_GSQ: 今天才有空看下去贴示例代码，已经附上了，使用2.8.11 默认基座包进行打包然后运行，canvasToTempFilePath，无论成功失败都没有回调

回复 LeoHuang: 我现在重新下载了2.8.11，使用之前的自定义基座就不行，使用默认基座就可以。。。这真的太不友好了吧，升级要兼容下版本阿

回复 LeoHuang: 原来是这样啊，每次更新后，自定义基座需要重新打包，理论上会弹出不兼容的提示，你应该是没看或者屏蔽了提示。

回复 DCloud_UNI_GSQ: 我看了更新日志是放在了uni-app插件一列的，不是APP插件更新的那一列才需要更新包么？另外，更新APP成本是很大的，建议像这种会导致热更新之后APP用不了的，最好是保留旧的方式，然后新开一个API，会让人更有选择权和显得专业

回复 LeoHuang: 不是，无限制的兼容肯定是不可行的，后续会考虑小版本更新保持兼容的方案。

遇到相同问题

遇到相同问题

详细说明

回复 DCloud_UNI_GSQ: 我的问题， 与 https://ask.dcloud.net.cn/question/133789这个是同一个问题， 在vue3, app端，自定义组件中， canvasToTempFilePath 不执行任何回调

这是一个典型的canvasToTempFilePath在iOS设备上无响应的问题。根据代码分析，主要存在以下问题：

  1. canvasToTempFilePath调用时机问题：在iOS上，canvas绘制是异步的，需要在draw方法的回调中调用canvasToTempFilePath

  2. 缺少必要的参数：canvasToTempFilePath需要指定width和height参数

修改后的exportImg方法应该如下：

exportImg() {
    this.canvas.draw(false, () => {
        uni.canvasToTempFilePath({
            canvasId: 'drawImg',
            width: 200,  // 与canvas实际宽度一致
            height: 200, // 与canvas实际高度一致
            success: () => {
                uni.showToast({
                    title: '导出成功',
                    icon: 'none'
                })
            },
            fail: (err) => {
                console.error(err)
                uni.showToast({
                    title: '导出失败',
                    icon: 'none'
                })
            }
        }, this)
    })
}

另外，建议在canvas元素上添加明确的width和height属性：

<canvas ref="canvas" class="canvas-img" canvas-id="drawImg" 
    :style="{width: '200rpx', height: '200rpx'}" 
    :disable-scroll="false"></canvas>
回到顶部