uni-app uni.canvasToTempFilePath 没有返回

uni-app uni.canvasToTempFilePath 没有返回

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.66

手机系统：Android

手机系统版本号：Android 7.0

手机厂商：华为

手机机型：华为P9 eva-al00

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

drawCanvas() {
    var ctx = uni.createCanvasContext('myCanvas')
    var that=this;
    // begin path
    ctx.rect(10, 10, 100, 30)
    ctx.setFillStyle('yellow')
    ctx.fill()    

    // begin another path    
    ctx.beginPath()    
    ctx.rect(10, 40, 100, 30)    

    // only fill this rect, not in current path    
    ctx.setFillStyle('blue')    
    ctx.fillRect(10, 70, 100, 30)    

    ctx.rect(10, 100, 100, 30)    

    // it will fill current path    
    ctx.setFillStyle('red')    
    ctx.fill()   
    ctx.draw(true, (() => {    
    setTimeout(() => {  
        console.log('asas');  
        uni.canvasToTempFilePath({  
          x: 100,  
          y: 200,  
          width: 50,  
          height: 50,  
          destWidth: 100,  
          destHeight: 100,  
          canvasId: 'myCanvas',  
          success: function(res) {  
            // 在H5平台下，tempFilePath 为 base64  
            console.log(res.tempFilePath)  
          },  
          complete: function(res) {  
              console.log('c');  
        }  
        }, that)  
    }, 1000);  
    })());  
}

success、complete、fail 都不执行。

操作步骤：

<template>    
    <view>    
        <view>canvas to temp file path</view>    
        <canvas style="width: 300px; height: 200px;border: 1px solid red;" id="myCanvas"  ref="myCanvas" canvas-id="myCanvas"></canvas>    
    </view>    
</template>    

<script>    
export default {    
    data() {    
        return {  
            aaa: 'aaa'  
        }    
    },    
    methods: {    
        drawCanvas() {    
            var ctx = uni.createCanvasContext('myCanvas')   
            var that = this;  
            // begin path    
            ctx.rect(10, 10, 100, 30)    
            ctx.setFillStyle('yellow')    
            ctx.fill()    

            // begin another path    
            ctx.beginPath()    
            ctx.rect(10, 40, 100, 30)    

            // only fill this rect, not in current path    
            ctx.setFillStyle('blue')    
            ctx.fillRect(10, 70, 100, 30)    

            ctx.rect(10, 100, 100, 30)    

            // it will fill current path    
            ctx.setFillStyle('red')    
            ctx.fill()   
            ctx.draw(false, (() => {    
            setTimeout(() => {  
                console.log('asas');  
                uni.canvasToTempFilePath({  
                  x: 100,  
                  y: 200,  
                  width: 50,  
                  height: 50,  
                  destWidth: 100,  
                  destHeight: 100,  
                  canvasId: 'myCanvas',  
                  success: function(res) {  
                    // 在H5平台下，tempFilePath 为 base64  
                    console.log(res.tempFilePath)  
                  },  
                  complete: function(res) {  
                      console.log('c');  
                }  
                }, that)  
            }, 1000);  
            })());  

        }  
},  
onReady() {    
   this.drawCanvas();  
}    
}    
</script>

更多关于uni-app uni.canvasToTempFilePath 没有返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

hello , 我这里测试，你提供的代码是可以正常执行的，你可以检查一下看一看是不是其它位置有影响的

更多关于uni-app uni.canvasToTempFilePath 没有返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢。后测试，vue页面可以 nvue页面不行。

是否能让nvue也支持？

回复 3***@qq.com: nvue 已经不在维护了

这个问题可能是由于几个常见原因导致的：

  1. 在nvue页面中，canvas的实现与vue页面不同，需要特别注意：
  • nvue的canvas是原生组件，层级最高
  • 需要确保canvas完全渲染完成后再调用转换方法
  1. 代码问题：
  • 在draw()方法的回调中又嵌套了setTimeout，可能导致时序问题
  • canvasToTempFilePath的第二个参数(that)传递可能不正确
  1. Android 7.0的兼容性问题

建议修改方案：

ctx.draw(true, () => {
    uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success(res) {
            console.log(res.tempFilePath)
        },
        fail(err) {
            console.error(err)
        }
    }, this)
})
回到顶部