uni-app 实现拍照后给照片加水印功能

遇到个需求需要实现,研究了一下后写了个demo

本质上就是把拍完照后的照片放到canvas里,然后加上水印样式然后再重新生成一张图片

代码如下,看注释即可~使用的话记得还是得优化下代码

javascript 复制代码
<template>
  <view class="content">
    <button @click="handlePhotoAndWatermask">测试按钮</button>
    <!-- uni-app必须要有一个canvas元素 -->
    <!-- 所以在这里放置一个并且将它隐藏起来 -->
    <view style="position: absolute; left: 9999px">
      <canvas
        canvas-id="myCanvas"
        :style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }"
      ></canvas>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 300,
      canvasHeight: 150,
    }
  },
  methods: {
    handlePhotoAndWatermask() {
      // 调用拍照功能
      uni.chooseMedia({
        mediaType: ['image'],
        sourceType: ['camera'],
        maxDuration: 30,
        camera: 'back',
        success: (res) => {
          const filePath = res.tempFiles[0].tempFilePath

          // 获取图片宽高
          uni.getImageInfo({
            src: filePath,
            success: ({ width, height }) => {
              // 将canvas的宽高置成同样的宽高
              this.canvasWidth = width
              this.canvasHeight = height

              // 用this.$nextTick不行,第一次还是会按默认的300 * 150截取
              // setTimeout时间也不能太短,500ms左右
              setTimeout(() => {
                const ctx = uni.createCanvasContext('myCanvas')
                // 将图片放到canvas中
                ctx.drawImage(filePath, 0, 0, width, height)

                // 加上想要绘制的水印
                ctx.font = '50px system-ui'
                ctx.fillStyle = 'red'
                ctx.fillText('测试写入', 20, 100)
                ctx.draw()

                // 将canvas转化成图片
                uni.canvasToTempFilePath({
                  canvasId: 'myCanvas',
                  width: this.canvasWidth,
                  height: this.canvasHeight,
                  success: ({ tempFilePath }) => {
                    // 可以对生成的图片做你需要的操作
                    uni.previewImage({
                      current: 0,
                      urls: [tempFilePath],
                    })
                  },
                })
              }, 500)
            },
            fail() {
              console.error('获取图片详情失败')
            },
          })
        },
      })
    },
  },
}
</script>

最终展示效果如下~

PS: 这个只是小程序版,不过App端也是类似的实现方式~

相关推荐
yuki_uix3 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句4 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易4 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟11 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子18 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao34 分钟前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿28740 分钟前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端1 小时前
发布一个monaco-editor 汉化包
前端·npm·vite
石小石Orz1 小时前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini1 小时前
wd-button组件阻止事件冒泡的
前端