uni-app canvas在vue3环境保存为图片到相册报错

这段代码在 vue2 中能够正常运行，也能保存为图片到相册，但是 vue3 环境报错：

"canvasToTempFilePath:fail Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas or VideoFrame)'"

是在微信小程序模拟器中出现的

代码如下：

<template>  
    <view>  
        <canvas style="width: 300px; height: 400px;"  
            canvas-id="firstCanvas" id="firstCanvas"></canvas>  

        <button @click="saveImage11">保存</button>  
    </view>  

</template>  

<script>  
    export default {  
        data() {  
            return {  
                selectId: 'firstCanvas',  
                scrollLeft: 0,  
                canvas: null  
            }  
        },  
        props: ['content'],  
        watch: {  
            content(value) {  
                if (value) {  
                    this.createCanvas11()  
                }  
            }  
        },  
        methods: {  
            // 生成canvas  
            createCanvas11() {  
                const ctx = uni.createCanvasContext('firstCanvas', this);  
                ctx.clearRect(0, 0, 300, 400)  
                ctx.fillStyle = "#FFFFFF";  
                ctx.fillRect(0, 0, 300, 400);  

                function findBreakPoint(text, width, context) {  
                    var min = 0;  
                    var max = text.length - 1;  
                    while (min <= max) {  
                        var middle = Math.floor((min + max) / 2);  
                        var middleWidth = context.measureText(text.substr(0, middle)).width;  
                        var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;  
                        if (middleWidth <= width

songsunli 1楼•6 天前

你给的代码不够完整，不能运行，能提供更多内容吗，或者你进行删减代码，看看具体报错是哪一行有问题。切换成 type=2d 的新版写法有没有问题？

sinazl 2楼•6 天前

在 uni-app 中使用 canvas 绘制内容并保存为图片到相册时，可能会遇到一些报错。以下是一些常见的问题及解决方案，特别是在 Vue3 环境中。

1. 权限问题

在保存图片到相册时，需要确保应用有写入相册的权限。如果没有权限，保存操作会失败。

解决方案：

在 manifest.json 中配置权限：

{
  "app-plus": {
    "permissions": [
      "writePhotosAlbum"
    ]
  }
}

在代码中动态请求权限：

uni.getSetting({
  success(res) {
    if (!res.authSetting['scope.writePhotosAlbum']) {
      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success() {
          console.log('授权成功');
        },
        fail() {
          console.log('授权失败');
        }
      });
    }
  }
});

2. Canvas 绘制问题

确保 canvas 绘制的内容已经完成，并且在保存之前已经正确渲染。

解决方案：

在 canvas 绘制完成后，使用 uni.canvasToTempFilePath 将 canvas 内容转换为临时文件路径，然后再保存到相册。

const canvas = uni.createCanvasContext('myCanvas');
canvas.draw(); // 绘制内容

canvas.draw(false, () => {
  uni.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success(res) {
      const tempFilePath = res.tempFilePath;
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success() {
          console.log('保存成功');
        },
        fail(err) {
          console.log('保存失败', err);
        }
      });
    },
    fail(err) {
      console.log('生成临时文件失败', err);
    }
  });
});

3. Canvas ID 问题

确保 canvas 的 id 与代码中的 canvasId 一致。

解决方案：

在 template 中正确设置 canvas 的 id：

<canvas canvas-id="myCanvas" id="myCanvas" style="width: 300px; height: 300px;"></canvas>

4. 异步问题

canvas 的绘制是异步的，确保在绘制完成后再进行保存操作。

解决方案：

使用 canvas.draw 的回调函数来确保绘制完成后再进行保存操作，如上文所示。

5. Vue3 环境问题

在 Vue3 中，canvas 的上下文获取方式与 Vue2 略有不同，确保正确获取 canvas 上下文。

解决方案：

在 Vue3 中，可以使用 ref 来获取 canvas 元素：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);

    onMounted(() => {
      const canvas = uni.createCanvasContext('myCanvas', canvasRef.value);
      canvas.draw(); // 绘制内容

      canvas.draw(false, () => {
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success(res) {
            const tempFilePath = res.tempFilePath;
            uni.saveImageToPhotosAlbum({
              filePath: tempFilePath,
              success() {
                console.log('保存成功');
              },
              fail(err) {
                console.log('保存失败', err);
              }
            });
          },
          fail(err) {
            console.log('生成临时文件失败', err);
          }
        });
      });
    });

    return {
      canvasRef
    };
  }
};