原

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

390人阅读 2024/12/16 17:00 总访问：801698 评论：0 收藏：0 手机

分类: 前端

tn2>比如我想把原图为3508*2480的缩小三倍变成1169*827下编辑，这个时候我把Canvas的宽高设置成1169*827编辑后，后导出为图片的时候让图片可以变成原来背景图片所拥有的3508*2480。
因为有些时候原图太大了，所以按图片大小来编辑不太方便，先缩小后编辑在放大导出。

### 示例代码如下：

```vue
<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`函数的原因。

tn4>这个方案是可以在导出的时候变成原有的分辨率，但是这个方案应该就是类似于把图片放大了，但是图片会失真哇，背景还是没有原始状态下的分辨率清晰。

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 9篇

ORM 16篇

前端 93篇

随笔 17篇

移动开发 6篇

数据库 8篇

英语 3篇

rabbitmq 1篇

.net core 7篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

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

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}