0%

uniapp 入门实战 04: canvasToTempFilePath 解决 fail canvas is empty 报错

概要内容

  • 问题描述
  • 解决方法

问题描述


起因:一个vue页面组件都2645行,而且功能有多,实在太难维护,所以决定进行功能拆分重构。

https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master//img/20211021093914.png

调整之前结构

  • PageScene.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
...
<!-- #ifdef APP-PLUS || H5 -->
<canvas
canvas-id="canvas"
class="canvas"
:style="{ width: canvasWidth, height: canvasHeight }"
></canvas>
<!-- #endif -->

<!-- #ifndef APP-PLUS || H5 -->
<canvas
canvas-id="canvas"
id="canvas"
class="canvas"
:style="{ width: canvasWidth, height: canvasHeight }"
></canvas>
<!-- #endif -->
...
</template>

调整之后结构

  • SceneRender.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <template>
    <div class="scene-Render">
    <!-- #ifdef APP-PLUS || H5 -->
    <canvas
    canvas-id="canvas"
    class="canvas"
    :style="{ width: canvasWidth, height: canvasHeight }"
    ></canvas>
    <!-- #endif -->

    <!-- #ifndef APP-PLUS || H5 -->
    <canvas
    canvas-id="canvas"
    id="canvas"
    class="canvas"
    :style="{ width: canvasWidth, height: canvasHeight }"
    ></canvas>
    <!-- #endif -->
    </div>
    </template>

    <script>
    ...
    export default {
    onShow(){
    let canvas = uni.createCanvasContext("canvas", this);
    canvas.setStrokeStyle("#00ff00");
    canvas.setLineWidth(5);
    canvas.rect(0, 0, 200, 200);
    canvas.stroke();
    canvas.draw(false, () => {
    setTimeout(() => {
    uni.canvasToTempFilePath({
    canvasId: "canvas",
    x: 0,
    y: 0,
    width: 200,
    height: 200,
    destWidth: 200,
    destHeight: 200,
    complete: (res) => {
    console.error(res);
    },
    });
    }, 500);
    });
    }
    }
    ...
    </script>

    问题出现:canvas绘制没有一点问题,但是uni.canvasToTempFilePath回调一直报错:canvasToTempFilePath: fail canvas is empty。

  • PageScene.vue

    1
    2
    3
    4
    5
    <template>
    ...
    <SceneRender></SceneRender>
    ...
    </template>

解决方法

经过各种尝试最终发现canvas标签的定义只能放到page页面中,uni.canvasToTempFilePath 才会转换成功。

  • SceneRender.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<div class="scene-Render">
...
</div>
</template>

<script>
...
export default {
data: {
return {
canvas: undefined
}
},
methods: {
init(cs){
this.canvas = cs;
}
}
}
...
</script>
  • PageScene.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <template>
    ...
    <!-- #ifdef APP-PLUS || H5 -->
    <canvas
    canvas-id="canvas"
    class="canvas"
    :style="{ width: canvasWidth, height: canvasHeight }"
    ></canvas>
    <!-- #endif -->

    <!-- #ifndef APP-PLUS || H5 -->
    <canvas
    canvas-id="canvas"
    id="canvas"
    class="canvas"
    :style="{ width: canvasWidth, height: canvasHeight }"
    ></canvas>
    <!-- #endif -->

    <SceneRender ref="sceneRender"></SceneRender>
    ...
    </template>

    <script>
    ...
    export default {
    onShow(){
    this.$refs.sceneRender.init(uni.createCanvasContext("canvas", this));
    }
    }
    ...

参考文献

以上:如发现有问题,欢迎留言指出,我及时更正

如何文章对你有益,请给我买杯豆浆喝