vue3 使用Canvas对图像进行编辑，图片里边添加文字，导出为图片，导出图片的时候按照一定比例进行导出

比如我想把原图为35082480的缩小三倍变成1169827下编辑，这个时候我把Canvas的宽高设置成1169827编辑后，后导出为图片的时候让图片可以变成原来背景图片所拥有的35082480。
因为有些时候原图太大了，所以按图片大小来编辑不太方便，先缩小后编辑在放大导出。

示例代码如下：

<template>
  <div>
    <canvas ref="canvasRef" :width="canvasWidth" :height="canvasHeight"></canvas>
    <button @click="exportCanvasAsImage">Export as Image</button>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 原始图片大小
const originalWidth = 3508;
const originalHeight = 2480;
// Canvas大小（缩小三倍）
const scale = 3;
const canvasWidth = originalWidth / scale;
const canvasHeight = originalHeight / scale;
// 引用Canvas元素
const canvasRef = ref<HTMLCanvasElement | null>(null);
let ctx!: CanvasRenderingContext2D;
let originalImage!: HTMLImageElement;
// 加载原始图片
const loadImage = () => {
  originalImage = new Image();
  originalImage.src = 'path/to/your/original/image.jpg'; // 替换为你的图片路径
  originalImage.onload = () => {
    // 图片加载完成后进行编辑
    editCanvas();
  };
};
// 组件挂载时初始化
onMounted(() => {
  loadImage();
});
// 编辑Canvas内容的函数
const editCanvas = () => {
  if (canvasRef.value && originalImage.complete) {
    ctx = canvasRef.value.getContext('2d')!;
    // 绘制缩小后的原始图片
    ctx.drawImage(originalImage, 0, 0, canvasWidth, canvasHeight);
    // 在Canvas上添加文字或图片信息（示例：添加文字）
    ctx.font = '24px Arial';
    ctx.fillStyle = 'red';
    ctx.fillText('Hello, edited image!', 50, 50);
    // 你可以在这里添加更多的编辑操作...
  }
};
// 导出Canvas内容为图片的函数
const exportCanvasAsImage = () => {
  if (canvasRef.value) {
    // 创建一个新的Canvas元素，用于导出图像（原始大小）
    const exportCanvas = document.createElement('canvas');
    exportCanvas.width = originalWidth;
    exportCanvas.height = originalHeight;
    const exportCtx = exportCanvas.getContext('2d')!;
    // 将编辑后的Canvas内容按比例缩放回原始大小
    exportCtx.drawImage(
      canvasRef.value,
      0, 0, canvasWidth, canvasHeight, // 源Canvas的坐标和尺寸
      0, 0, originalWidth, originalHeight // 目标Canvas的坐标和尺寸
    );
    // 导出为图片
    exportCanvas.toBlob(blob => {
      const url = URL.createObjectURL(blob!);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'edited-image.png';
      a.click();
      URL.revokeObjectURL(url); // 释放URL对象
    }, 'image/png');
  }
};
</script>
<style scoped>
/* 你可以在这里添加样式 */
</style>

如果只按照编辑大小的cans导出，这样写即可

// 只按照编辑大小的cans导出
const exportCanvasAsImage = () => {
    if (canvasRef.value) {
        // 导出为图片
        canvasRef.value.toBlob((blob) => {
            const url = URL.createObjectURL(blob!)
            const a = document.createElement('a')
            a.href = url
            a.download = 'exported-image.png'
            a.click()
            URL.revokeObjectURL(url) // 释放URL对象
        }, 'image/png')
    }
}

在这个示例中，我们：

1. 定义了原始图片的宽度和高度（originalWidth 和 originalHeight）。
2. 计算了缩小比例后的Canvas宽度和高度（canvasWidth 和 canvasHeight）。
3. 在onMounted钩子中加载了原始图片，并在图片加载完成后调用editCanvas函数。
4. 在editCanvas函数中，我们将缩小后的原始图片绘制到Canvas上，并添加了文字或其他信息。
5. 在exportCanvasAsImage函数中，我们创建了一个新的Canvas元素，其尺寸与原始图片相同，并使用drawImage方法将编辑后的Canvas内容按比例缩放回原始大小，然后导出为图片。

注意，实际使用的时候你需要将originalImage.src替换为你的原始图片的实际路径。此外，由于图片加载是异步的，因此在图片加载完成之前，Canvas上不会显示任何内容。这就是为什么我们在originalImage.onload事件处理程序中调用editCanvas函数的原因。

这个方案是可以在导出的时候变成原有的分辨率，但是这个方案应该就是类似于把图片放大了，但是图片会失真哇，背景还是没有原始状态下的分辨率清晰。