vue实现canvas照片水印
使用 Vue 实现 Canvas 照片水印
准备工作
确保项目中已安装 Vue，创建一个 Vue 组件用于处理图片和水印。需要准备一张图片和一个水印文字或图片。
创建 Canvas 画布
在 Vue 组件的模板中添加一个 canvas 元素，用于绘制图片和水印。
<template>
<div>
<canvas ref="canvas" width="800" height="600"></canvas>
</div>
</template>加载图片和水印
在组件的 mounted 钩子中加载图片和水印图片（如果有），并绘制到 Canvas 上。
<script>
export default {
mounted() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
const img = new Image();
const watermarkText = 'Watermark';
img.onload = () => {
// 绘制原始图片
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 设置水印样式
ctx.font = '30px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 绘制水印文字
ctx.fillText(watermarkText, canvas.width / 2, canvas.height / 2);
};
img.src = 'path/to/your/image.jpg';
}
};
</script>动态调整水印
如果需要动态调整水印的位置、透明度或大小，可以通过计算属性或方法实现。
methods: {
drawWatermark(ctx, text, opacity, size) {
ctx.font = `${size}px Arial`;
ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
ctx.fillText(text, this.$refs.canvas.width / 2, this.$refs.canvas.height / 2);
}
}保存带水印的图片
使用 Canvas 的 toDataURL 方法将带水印的图片导出为 Base64 或文件。
saveImage() {
const canvas = this.$refs.canvas;
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'watermarked-image.png';
link.click();
}响应式调整
监听窗口大小变化或图片尺寸变化，动态调整 Canvas 大小和水印位置。
window.addEventListener('resize', this.adjustCanvasSize);
adjustCanvasSize() {
const canvas = this.$refs.canvas;
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.8;
this.redrawImageAndWatermark();
}使用图片作为水印
如果水印是图片而非文字，加载水印图片并绘制到 Canvas 上。
const watermarkImg = new Image();
watermarkImg.onload = () => {
ctx.drawImage(
watermarkImg,
canvas.width - watermarkImg.width - 20,
canvas.height - watermarkImg.height - 20,
watermarkImg.width,
watermarkImg.height
);
};
watermarkImg.src = 'path/to/watermark.png';通过以上步骤，可以在 Vue 中实现 Canvas 照片水印功能，支持文字或图片水印，并能动态调整和保存。
