uni-app 求购水印相机

附件是个简单的选择照片水印组件，不知道你是要这种的不，功能不太多，waterAddress是水印的文字，你可以参考下，不满足可以自己修改修改 import ImageWatermarkPicker from “@/components/image-watermark-picker.vue”

<ImageWatermarkPicker v-model="imageList" :key="2" limit="1" :waterText='waterAddress'  
                @change="changeFile">  
            </ImageWatermarkPicker><br>

nodeper 2楼•10 天前

加个wx:shenhl-0321 私聊下需求

bupafengyu 3楼•10 天前

可以做专业插件开发 q 1196097915 主页 https://ask.dcloud.net.cn/question/91948

yibo5220 4楼•10 天前

在uni-app中实现一个水印相机功能，可以结合原生插件或者利用canvas进行自定义水印的绘制。以下是一个基于canvas的简单实现示例，该示例展示了如何在拍照后添加水印。

首先，确保你的uni-app项目已经配置了相机权限和相册访问权限。

页面布局（pages/camera/camera.vue）：

<template>
  <view class="container">
    <button @click="takePhoto">拍照</button>
    <image v-if="photoPath" :src="photoPath" mode="widthFix" class="photo"></image>
    <canvas v-if="photoPath" canvas-id="watermarkCanvas" class="watermarkCanvas" style="display:none;"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photoPath: ''
    };
  },
  methods: {
    takePhoto() {
      const that = this;
      uni.chooseImage({
        count: 1,
        sourceType: ['camera'],
        success(res) {
          that.photoPath = res.tempFilePaths[0];
          that.addWatermark(res.tempFilePaths[0]);
        }
      });
    },
    addWatermark(imagePath) {
      const ctx = uni.createCanvasContext('watermarkCanvas', this);
      uni.getImageInfo({
        src: imagePath,
        success(res) {
          const { width, height } = res;
          ctx.drawImage(imagePath, 0, 0, width, height);
          ctx.setFontSize(20);
          ctx.setFillStyle('rgba(255, 255, 255, 0.5)');
          ctx.fillText('水印文字', 10, height - 10);
          ctx.draw(false, () => {
            uni.canvasToTempFilePath({
              canvasId: 'watermarkCanvas',
              success(result) {
                that.photoPath = result.tempFilePath;
              }
            });
          });
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.photo {
  width: 300px;
  margin-top: 20px;
}
.watermarkCanvas {
  width: 300px;
  height: 400px; /* 根据图片比例调整 */
}
</style>

注意事项：
- 确保canvas的width和height与图片尺寸匹配，或者根据需要调整比例。
- uni.chooseImage的sourceType设置为['camera']以直接调用相机。
- canvasToTempFilePath用于将绘制好的canvas内容导出为图片路径。

这个示例展示了一个简单的水印添加流程，你可以根据实际需求进一步定制水印内容、样式和位置。对于更复杂的需求，比如动态水印、多行水印等，可以进一步扩展addWatermark方法中的绘制逻辑。