原
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')
}
}
在这个示例中,我们:
- 定义了原始图片的宽度和高度(
originalWidth
和originalHeight
)。 - 计算了缩小比例后的Canvas宽度和高度(
canvasWidth
和canvasHeight
)。 - 在
onMounted
钩子中加载了原始图片,并在图片加载完成后调用editCanvas
函数。 - 在
editCanvas
函数中,我们将缩小后的原始图片绘制到Canvas上,并添加了文字或其他信息。 - 在
exportCanvasAsImage
函数中,我们创建了一个新的Canvas元素,其尺寸与原始图片相同,并使用drawImage
方法将编辑后的Canvas内容按比例缩放回原始大小,然后导出为图片。
注意,实际使用的时候你需要将originalImage.src
替换为你的原始图片的实际路径。此外,由于图片加载是异步的,因此在图片加载完成之前,Canvas上不会显示任何内容。这就是为什么我们在originalImage.onload
事件处理程序中调用editCanvas
函数的原因。
这个方案是可以在导出的时候变成原有的分辨率,但是这个方案应该就是类似于把图片放大了,但是图片会失真哇,背景还是没有原始状态下的分辨率清晰。
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)
评价
排名
8
文章
207
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:
50010702506256


欢迎加群交流技术