uniapp电子盖章

### 如何在 UniApp 中实现电子盖章功能

#### 1. 准备工作
为了实现在 UniApp 中给图片加盖印章的功能，首先需要准备两个资源：一个是待处理的底图，另一个是作为印章的透明 PNG 图片。

#### 2. HTML 结构设计
创建一个简单的页面结构用于展示和操作图像。这可以通过定义 `<template>` 来完成，在其中放置一个容器用来显示原始图片以及最终带有水印的效果图。

<template>
  <view class="container">
    <!-- 原始图片 -->
    <image :src="originalImageSrc" mode="widthFix"></image>

    <!-- 加载后的合成图片 -->
    <canvas canvas-id="stampCanvas" style="display:none;"></canvas>
    <button @click="addStamp">添加印章</button>
    
    <!-- 合成后的图片 -->
    <image v-if="stampedImageUrl" :src="stampedImageUrl" mode="widthFix"></image>
  </view>
</template>

#### 3. JavaScript 方法编写
接下来是在脚本部分编写逻辑来加载两张图片并绘制到画布上，最后导出新的合成图片。

<script>
export default {
  data() {
    return {
      originalImageSrc: '/static/images/original.jpg', // 底图路径
      stampImageSrc: '/static/images/stamp.png',       // 印章路径
      stampedImageUrl: ''                             // 合成后的图片URL
    };
  },
  methods: {
    async addStamp() {
      const ctx = uni.createCanvasContext('stampCanvas');
      
      // 绘制背景图片
      await this.drawImage(ctx, this.originalImageSrc);
      
      // 设置合适的坐标位置以确保印章位于合适的位置
      let xPosition = (ctx.width / 2) - 50;
      let yPosition = (ctx.height / 2) + 50;

      // 调整大小比例适应不同尺寸屏幕下的显示效果
      const scaleRatio = Math.min(1, window.innerWidth / 750);

      // 将印章按一定角度旋转后绘制上去
      ctx.save();
      ctx.translate(xPosition, yPosition);
      ctx.rotate(-Math.PI / 4); // 斜角45度
      await this.drawImage(ctx, this.stampImageSrc, { width: 100 * scaleRatio });
      ctx.restore();

      // 获取临时保存下来的base64编码字符串形式的新图片数据
      ctx.draw(false, () => {
        setTimeout(() => {
          uni.canvasToTempFilePath({
            canvasId: 'stampCanvas',
            success(res) {
              console.log('成功获取合成图片:', res.tempFilePath);
              this.stampedImageUrl = res.tempFilePath;
            }.bind(this),
            fail(err) {
              console.error('失败原因:', err.errMsg);
            }
          }, this.$scope || this);
        }, 100);
      });
    },

    drawImage(context, src, options={}) {
      return new Promise((resolve) => {
        wx.getImageInfo({
          src,
          success(imageInfo){
            context.drawImage(
              imageInfo.path,
              0, 0,
              options.width || imageInfo.width,
              options.height || imageInfo.height
            );
            resolve();
          }
        })
      });
    }
  }
}
</script>

此代码片段展示了如何利用 `uni.createCanvasContext` 和 `wx.getImageInfo` API 完成基本的绘图任务，并通过调整参数使印章能够按照预期的方式呈现出来[^1]。

#### 4. 样式优化
为了让用户体验更好，还可以进一步美化界面布局，比如设置按钮样式、控制图片宽高比等。

<style scoped lang="scss">
.container {
  padding: 20px;
}

image {
  margin-bottom: 20px;
  max-width: 100%;
}

button {
  display: block;
  margin: auto;
  background-color: #ff5b5b;
  color: white;
  border-radius: 8px;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  min-width: 120px;
}
</style>

以上就是在 UniApp 中实现简单版电子盖章功能的方法介绍。该方案不仅适用于 H5 页面，也兼容微信小程序等多种平台环境。