vue实现拍照加水印
Vue 实现拍照加水印功能
准备工作
确保项目已安装必要的依赖，如vue和vue-camera（或其他相机库）。可以通过以下命令安装：
npm install vue-camera --save引入相机组件
在Vue组件中引入相机库，并配置相机组件：
<template>
<div>
<camera ref="camera" :resolution="{ width: 640, height: 480 }"></camera>
<button @click="capture">拍照</button>
<canvas ref="canvas" width="640" height="480"></canvas>
</div>
</template>
<script>
import { Camera } from 'vue-camera';
export default {
components: { Camera },
methods: {
capture() {
const photo = this.$refs.camera.capture();
this.addWatermark(photo);
}
}
};
</script>添加水印
通过Canvas绘制水印，将拍照结果和水印合并：
methods: {
addWatermark(photo) {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
ctx.fillText('Watermark Text', 30, canvas.height - 30);
// 可选：导出带水印的图片
const watermarkedPhoto = canvas.toDataURL('image/png');
console.log(watermarkedPhoto); // 可进一步处理或保存
};
img.src = photo;
}
}样式调整
为相机和Canvas添加样式，确保显示正常：
canvas {
display: none; /* 隐藏Canvas，仅用于处理 */
}保存或上传
将带水印的图片保存或上传到服务器：
// 示例：保存到本地
function downloadImage(dataUrl, filename) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
link.click();
}
// 在addWatermark的onload中调用
downloadImage(watermarkedPhoto, 'watermarked-photo.png');注意事项
- 相机权限：确保浏览器已授权摄像头访问权限。
- 跨域问题：若图片涉及跨域，需设置
img.crossOrigin = 'Anonymous'。 - 移动端适配：根据需要调整相机分辨率和Canvas尺寸。
通过以上步骤，可以实现拍照后自动添加水印的功能。
