vue实现盖章组件
实现Vue盖章组件的步骤
组件结构设计
创建一个Vue组件，包含画布元素和必要的控制按钮。画布用于显示盖章效果，按钮用于触发盖章操作。组件需要接收图片和盖章位置等参数。
<template>
<div class="stamp-container">
<canvas ref="canvas" @click="handleCanvasClick"></canvas>
<button @click="applyStamp">盖章</button>
</div>
</template>初始化画布
在组件的mounted生命周期中初始化画布，设置画布大小并绘制基础图像。使用ref获取canvas元素，并通过Canvas API进行绘制。
mounted() {
this.canvas = this.$refs.canvas;
this.ctx = this.canvas.getContext('2d');
this.setCanvasSize();
this.drawBaseImage();
}绘制盖章效果
实现盖章的绘制逻辑，包括加载印章图片、设置混合模式和应用印章。使用drawImage方法将印章绘制到指定位置，通过globalCompositeOperation控制混合效果。
methods: {
applyStamp() {
const stampImg = new Image();
stampImg.src = this.stampImage;
stampImg.onload = () => {
this.ctx.globalCompositeOperation = 'multiply';
this.ctx.drawImage(stampImg, this.posX, this.posY, this.width, this.height);
};
}
}交互处理
添加点击事件处理，允许用户通过点击画布选择盖章位置。获取点击坐标并更新组件的位置状态。
handleCanvasClick(event) {
const rect = this.canvas.getBoundingClientRect();
this.posX = event.clientX - rect.left - this.width/2;
this.posY = event.clientY - rect.top - this.height/2;
}样式调整
为组件添加基本样式，确保画布显示正常。设置画布背景透明，并添加适当的边框和阴影效果。
.stamp-container {
position: relative;
}
canvas {
border: 1px dashed #ccc;
background-color: transparent;
}参数配置
通过props接收外部传入的参数，如图片URL、默认位置和印章尺寸。为参数设置默认值和类型验证。
props: {
baseImage: {
type: String,
required: true
},
stampImage: {
type: String,
required: true
},
width: {
type: Number,
default: 100
},
height: {
type: Number,
default: 100
}
}导出图像
添加导出功能，将盖章后的画布转换为图片。使用toDataURL方法获取图像数据，可通过事件或直接下载方式提供结果。
exportImage() {
const dataURL = this.canvas.toDataURL('image/png');
this.$emit('export', dataURL);
}组件使用示例
在父组件中引入并使用盖章组件，传入必要的参数并处理导出事件。
<template>
<stamp-component
:base-image="baseImage"
:stamp-image="stampImage"
@export="handleExport"
/>
</template>
