vue3 使用Canvas对图像进行编辑，图片里边添加文字，导出为图片，导出图片的时候按照一定比例进行导出 电脑版发表于：2024/12/16 17:00 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>这个方案是可以在导出的时候变成原有的分辨率，但是这个方案应该就是类似于把图片放大了，但是图片会失真哇，背景还是没有原始状态下的分辨率清晰。
