uniapp自定义水印相机

最新推荐文章于 2024-07-14 18:54:15 发布
最新推荐文章于 2024-07-14 18:54:15 发布
阅读量2k 收藏 13
点赞数 3
分类专栏： uniapp 文章标签： uni-app水印相机 uniapp照片水印 微信小程序水印相机 微信小程序照片水印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abs625/article/details/132831755
版权

uniapp自定义水印相机

背景

上一篇文章实现了uniapp中给页面添加水印，今天我们实现一个自定义水印相机（最近跟水印杠上了，哈哈）。主要使用了camera组件来实现取景框预览，最后用canvas将自定义水印绘制到拍好的照片上面，先上图镇楼。
在这里插入图片描述在这里插入图片描述

实现

页面分为取景框和拍照完成后预览

UI实现

1、我们首先打开微信，哈哈哈哈，没错就是打开微信，这个取景框页面参考微信拍照界面UI。
2、取景界面分为上下两个部分，上部分为camera取景框组件，下部分为操作区域。

取景框组件上的关闭和水印，以及拍完照片后的略缩图展示需要通过cover-view和cover-image来展示。
代码如下：

<camera :device-position="position" 
        :flash="flash"
        @error="error"
        class="camera" 
        :style="'height:'+cHei+'px;'">
        <cover-image 
            class="close-img active" 
            @click="close" 
            src="/static/miniprogram/custom-camera/close.png"/>
        <cover-view class="water-marker">
            <cover-view class="time">11:09</cover-view>
            <cover-view class="div"></cover-view>
            <cover-view class="date">2023-09-11</cover-view>
            <cover-view class="week">星期一</cover-view>
            <cover-view class="address">江西省南昌市东湖区广场北路2号</cover-view>
        </cover-view>
        <cover-image 
            class="result"
            @click="handlePre" 
            :src="photo"
            v-show="photo"/>
    </camera>

下半部分操作区域包含左边闪光灯控制按钮，中间拍照按钮(通过css实现同心圆)以及右边切换摄像头按钮。
实现代码如下：

<view class="bottom layout-row less-center">
        <image :src="'/static/miniprogram/custom-camera/light-'+(flash == 'off' ? 'on' : 'off')+'.png'"
            :class="'light-img active '+(position == 'front' ? 'hidden' : '')"
            @click="handleLight"/>
        <view class="layout-row center cicle-outside">
            <view class="cicle-inside active"
            @click="doTakePhoto"/>
        </view>
        <image src="/static/miniprogram/custom-camera/switch.png"
            class="switch-img active"
            @click="handlePosition"/>
    </view>

这波操作过后，取景页面就是开头你看到的效果了。

功能实现

先定义好控制变量

...
const position = ref('back')//摄像头
const flash = ref('off')//闪光灯
const photo = ref('')//拍完后的图片
const canvasW = ref(0)//绘制水印的canvas宽度
const canvasH = ref(0)//绘制水印的canvas高度
const fristTimedraw = ref(true)//是否为首次绘制
const working = ref(false)//是否正在生成水印
...

关闭按钮事件

...
const close = () => {
        uni.navigateBack({
            delta: 1
        })
    }
...

摄像头切换事件

...
const handlePosition = () => {
        if(working.value){
            return
        }
        if(position.value == 'back'){
            position.value = 'front'
            //切换成前置摄像头关闭闪光灯
            flash.value = 'off'
        }else {
            position.value = 'back'
        }
    }
...

闪光灯事件

...
const handleLight = () => {
        if(working.value){
            return
        }
        if(flash.value == 'off'){
            flash.value = 'on'
        }else {
            flash.value = 'off'
        }
    }
...

拍完后预览

...
const handlePre = () => {
        if(working.value){
            return
        }
        uni.previewImage({
            current: 0,
            urls: [photo.value],
            success: (res) => {
                console.log(res);
            },
        });
    }
...

最终要的拍照功能来了，因为我们camera组件拍出的照片本身是不带水印的， 所以我们需要在界面上放一个canvas组件，后期将水印和图片都绘制到canvas里面，再通过canvas来生成图片。

先在界面上添加一个canvas，且此canvas在界面不可见

...
<canvas canvas-id="firstCanvas"
        class="canvas"
        :style="'width:'+canvasW+'px;height: '+canvasH+'px'"/>
...

全部实现代码

然后就是拍照之后，将照片和水印相关内容绘制到canvas上面，这里包括绘制矩形，文字等，canvas绘图可参考我之前文章canvas绘图API。绘制好了之后通过uni.canvasToTempFilePath将canvas生成位图片。

在这里插入图片描述

我知道的，谁愿意看你瞎BB这么多，有没有能一键复制的全部代码？哎，别走啊，必须安排！！！
接下来就是全部实现代码

<template>
  <view class="layout-column">
    <camera :device-position="position" 
        :flash="flash"
        @error="error"
        class="camera" 
        :style="'height:'+cHei+'px;'">
        <cover-image 
            class="close-img active" 
            @click="close" 
            src="/static/miniprogram/custom-camera/close.png"/>
        <cover-view class="water-marker">
            <cover-view class="time">11:09</cover-view>
            <cover-view class="div"></cover-view>
            <cover-view class="date">2023-09-11</cover-view>
            <cover-view class="week">星期一</cover-view>
            <cover-view class="address">江西省南昌市东湖区广场北路2号</cover-view>
        </cover-view>
        <cover-image 
            class="result"
            @click="handlePre" 
            :src="photo"
            v-show="photo"/>
    </camera>
    <view class="bottom layout-row less-center">
        <image :src="'/static/miniprogram/custom-camera/light-'+(flash == 'off' ? 'on' : 'off')+'.png'"
            :class="'light-img active '+(position == 'front' ? 'hidden' : '')"
            @click="handleLight"/>
        <view class="layout-row center cicle-outside">
            <view class="cicle-inside active"
            @click="doTakePhoto"/>
        </view>
        <image src="/static/miniprogram/custom-camera/switch.png"
            class="switch-img active"
            @click="handlePosition"/>
    </view>
    <canvas canvas-id="firstCanvas"
        class="canvas"
        :style="'width:'+canvasW+'px;height: '+canvasH+'px'"/>
  </view>
</template>

<script setup lang="ts">
    import {
        onLoad
    } from "@dcloudio/uni-app";
    import { 
        ref
    } from 'vue'
    const cHei = ref(0)
    const position = ref('back')
    const flash = ref('off')
    const photo = ref('')
    const canvasW = ref(0)
    const canvasH = ref(0)
    const fristTimedraw = ref(true)
    //是否正在生成水印
    const working = ref(false)
    onLoad(() => {
        cHei.value = uni.getSystemInfoSync().windowHeight - uni.upx2px(300)
    })
    const close = () => {
        uni.navigateBack({
            delta: 1
        })
    }
    const error = (e) => {
        console.log('camera error',e)
    }
    const takePhoto = () => {
        const ctx = uni.createCameraContext();
        ctx.takePhoto({
            quality: 'high',
            success: (res) => {
                console.log('takePhoto success',res)
                drawPhoto(res.tempImagePath)
            }
        });
    }
    const doTakePhoto = () => {
        working.value = true
        takePhoto()
        //这里真机上面第一次绘制水印图片可能需要很久，所以延迟500毫秒再执行一次
        if(fristTimedraw.value){
            setTimeout(()=>{
                takePhoto()
                fristTimedraw.value = false
            },500)
        }
    }
    const drawPhoto = (path) => {
        uni.getImageInfo({
            src: path,
            success: res => {
                let ctx = uni.createCanvasContext('firstCanvas');
                //设置画布宽高
                canvasW.value = res.width
                canvasH.value = res.height
                ctx.drawImage(path, 0, 0, res.width, res.height)
                //水印框的大小
                let w = 460
                let h = 180
                //水印框左上角坐标
                let x = 30
                let y = res.height - 210
                //圆角半径
                let r = 20
                let time = "14:30"
                let date = "2023-09-12"
                let week = "星期二"
                let address = "江西省南昌市东湖区广场北路2号"
                ctx.beginPath()
                // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
                ctx.setFillStyle('transparent')
                // 左上角
                ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

                // border-top
                ctx.moveTo(x + r, y)
                ctx.lineTo(x + w - r, y)
                ctx.lineTo(x + w, y + r)
                // 右上角
                ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

                // border-right
                ctx.lineTo(x + w, y + h - r)
                ctx.lineTo(x + w - r, y + h)
                // 右下角
                ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

                // border-bottom
                ctx.lineTo(x + r, y + h)
                ctx.lineTo(x, y + h - r)
                // 左下角
                ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

                // border-left
                ctx.lineTo(x, y + r)
                ctx.lineTo(x + r, y)

                // 这里是使用 fill 或者 stroke都可以
                ctx.fill()
                // ctx.stroke()
                ctx.closePath()
                // 剪切
                ctx.clip()
                ctx.setFillStyle('rgba(255, 255, 255, 0.2)')
                ctx.fillRect(x, y, w, h)
                
                //字体加粗真机不起作用?
                //ctx.font = "normal bold 50px Arial"
                ctx.setFontSize(55); // 设置字体大小
                ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
                ctx.fillText(time, x+30, y+70);

                let timeW = ctx.measureText(time).width
                ctx.setFillStyle('#FFFF00'); // 设置颜色为
                ctx.fillRect(x+30+timeW+30, y+20, 8, 70)

                ctx.setFontSize(30); // 设置字体大小
                ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
                ctx.fillText(date, x+30+timeW+30+50, y+45);

                ctx.setFontSize(28); // 设置字体大小
                ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
                ctx.fillText(week, x+30+timeW+30+50, y+85);

                ctx.setFontSize(24); // 设置字体大小
                ctx.fillText(address, 60, y+140);

                ctx.draw(false, () => {
                    uni.showLoading({
                        title: '正在生成水印照片'
                    })
                    uni.canvasToTempFilePath({
                        canvasId: 'firstCanvas',
                        destWidth: canvasW.value*2,   //展示图片尺寸=画布尺寸1*像素比2
                        destHeight: canvasH.value*2,
                        success: res1 => {
                            working.value = false
                            uni.hideLoading()
                            photo.value = res1.tempFilePath
                        }
                    });
                })
            }
        })
    }
    //照片保存到相册
    const savePhoto = (path) => {
        uni.saveImageToPhotosAlbum({
			filePath: path,
			success: res=> {
				uni.showToast({
                    title: '照片已保存到相册',
                    icon: 'none',
                    duration: 2000
                });
			}
		})
    }
    const handleLight = () => {
        if(working.value){
            return
        }
        if(flash.value == 'off'){
            flash.value = 'on'
        }else {
            flash.value = 'off'
        }
    }
    const handlePosition = () => {
        if(working.value){
            return
        }
        if(position.value == 'back'){
            position.value = 'front'
            //切换成前置摄像头关闭闪光灯
            flash.value = 'off'
        }else {
            position.value = 'back'
        }
    }
    const handlePre = () => {
        if(working.value){
            return
        }
        uni.previewImage({
            current: 0,
            urls: [photo.value],
            success: (res) => {
                console.log(res);
            },
        });
    }
</script>

<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }
    .camera {
        width: 100%;
        background: #999999;
    }
    .close-img {
        width: 48rpx;
        height: 48rpx;
        margin-top: 110rpx;
        margin-left: 40rpx;
    }
    .light-img {
        width: 48rpx;
        height: 48rpx;
    }
    .switch-img {
        width: 57rpx;
        height: 48rpx;
    }
    .bottom {
        width: 100%;
        height: 300rpx;
        background: black;
        justify-content: space-around;
    }
    .cicle-outside {
        width: 150rpx;
        height: 150rpx;
        border: 5rpx solid #fff;
        border-radius: 50%;
    }
    .cicle-inside {
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;
        background: #fff;
    }
    .hidden {
        visibility: hidden;
    }
    .water-marker {
        position: absolute;
        left: 30rpx;
        bottom: 30rpx;
        width: 430rpx;
        height: 180rpx;
        background: rgba($color: #ffffff, $alpha: 0.2);
        border-radius: 20rpx;
    }
    .time {
        font-size: 55rpx;
        color: white;
        position: absolute;
        top: 20rpx;
        left: 30rpx;
    }
    .div {
        border-radius: 3rpx;
        width: 8rpx;
        height: 70rpx;
        background: yellow;
        position: absolute;
        top: 20rpx;
        left: 200rpx;
    }
    .date {
        font-size: 28rpx;
        color: white;
        position: absolute;
        top: 20rpx;
        left: 240rpx;
        width: 180rpx;
    }
    .week {
        font-size: 28rpx;
        color: white;
        position: absolute;
        top: 60rpx;
        left: 240rpx
    }
    .address {
        font-size: 24rpx;
        color: white;
        position: absolute;
        top: 120rpx;
        left: 30rpx;
        bottom: 30rpx;
        word-break: break-all;
		word-wrap: break-word;
		white-space: pre-line;
    }
    .canvas {
        position: absolute;
        top: -999999rpx;
        width: 100%;
    }
    .result{
        width: 100rpx;
        height:100rpx;
        position: absolute;
        right:30rpx;
        bottom:30rpx;
        background:white;
        border-radius: 50%;
    }
</style>

里面有些样式是全局实现了引用的，其实就是flex布局然后row或者column，自己实现即可。目前为止，所有功能就已经实现了。

尾巴

页面上用到的图标是从阿里巴巴iconfont图标库下载。
今天的文章就到这里了，希望能给大家帮助，如果喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！

abs625
关注
专栏目录
uniapp [安卓苹果App端] - 详细实现自定义水印相机功能，调用手机摄像头打开相机并在周围悬挂自定义水印，使用相机拍照后添加水印文字或样式，uniapp APP端水印相机完整源码，兼容强大可靠
王佳斌
10-01 7267
uni-app，安卓Android，苹果ios，安卓app端，苹果App端，uniapp苹果app，水印相机，uniapp水印相机，Uniapp安卓app实现水印相机，uniapp苹果ios水印相机，打开系统相机拍照添加水印，地点打卡相机，水印相机(水印照片，图片加水印)，uniapp 自定义水印相机，制作水印相机给图片添加水印并且保存图片至本地，uniapp 拍照图片加水印，水印相机功能，手机调起摄像头拍照时自动插入文字、图片动态水印效果，支持水印显示拍摄者当前城市定位、自由调整水印大小和位置，手机拍照时
uniapp [全端兼容] - 详细实现拍照或相册选取图片后插入水印功能，手机拍照或相册上传图像并添加自定义水印及指定位置显示水印，uniApp给图片加水印后上传到后端服务器或保存到本机相册详细教程！
最新发布
王佳斌
09-27 5432
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，图片水印，上传照片带水印，从相册选择图片加水印功能，拍完照片给图片加水印，添加照片水印，uniapp图片加水印，为图片添加自定义水印，uni-app上传图片并添加水印，上传图片加水印，uni-app如何对拍摄的照片加水印，uni-app实现图片上传添加水印操作，给上传的图片添加上水印，图片加完水印后如何上传到服务器，水印相机，拍照图片加水印，相册选取后给图片加上水印，渲染失败，无法保存，文字水印，日期
uniapp-拍照加水印
Musician
10-19 2118
需求：拍照，给照片加水印 <template> <view style="position: absolute;top: -999999px;"> //把canvas移出视窗 <canvas :style="{'width':w,'height': h}" canvas-id="firstCanvas"></canvas> </view> </template> data： data(
uniapp实现水印相机
qq_43352505的博客
07-14 1811
水印相机 livePusher与canvas
uniapp+uView 实现自定义水印相机，拍完照片给图片加水印，从相册选择图片加水印功能
Z1014h的博客
01-15 2724
uniapp+uView 实现自定义水印相机，拍完照片给图片加水印，从相册选择图片加水印功能
uniapp水印相机(水印照片，图片加水印)
千万亿
05-25 2478
uniapp项目添加水印相机功能(包含日期时间，地理位置，经纬度等)
uni-app实现水印相机（仅小程序端）
qq_44910894的博客
07-12 3023
本文详细的讲解了在使用uni-app时，如何利用官方api来实现自定义水印相机的需求，为业务开发提供了有效的解决方案
uniapp自定义相机
03-08
使用初衷是解决调用原生相机闪退问题，现在延续到可自定义图案，添加水印等功能，用它可...里边编写了几个示例，有基本的相机，身份证采集相机，证件照采集相机以及定制水印相机，欢迎大家下载使用为您解决项目中的需求
自定义相机
06-19
本项目标题“自定义相机”表明我们要探讨的是如何创建一个具备拍照、添加水印以及预览窗口自适应屏幕功能的相机应用。下面将详细讲解这些知识点。 一、自定义相机 自定义相机通常涉及以下核心部分： 1. **捕获权限...
uniapp(全端兼容) - 最新详细实现水印相机功能，手机调起摄像头拍照时自动插入文字、图片动态水印效果，支持水印显示拍摄者当前城市定位、自由调整水印大小和位置（uniapp全平台通用，详细示例源码
高级前端工程师
04-17 3669
uniapp，微信小程序，h5网页网站，安卓苹果app，nvue，支付宝小程序，手机摄像头拍照时加入自定义水印，文字水印，图片水印，如何对拍摄的照片加水印，怎么在相机拍照时加入水印，小程序怎么做拍照时加水印，uni-app安卓苹果App右下角自动加入水印，uniapp拍照时加水印，实现水印相机，uni-app拍照加水印，使用uni-app实现实时拍照/视频并添加水印，拍照自动添加水印，uniapp拍照加水印的插件，如何拍照时放水印，怎么插入水印，uniapp拍摄时插入透明水印，uniapp vue相机添加水
【Uniapp微信小程序】自定义水印相机、微信小程序地点打卡相机
cnsv的博客
05-29 2387
uniapp微信小程序自定义水印相机。微信小程序水印打卡相机。水印相机/水印字体根据图片像素自适应。
uniapp 自定义水印相机
2201_75783276的博客
07-09 461
【代码】uniapp 自定义水印相机。
uniapp 拍照图片加水印
一直记录
01-17 2574
uniapp 封装组件 拍照加水印,保存图片加水印 路由 定义回调函数,函数名不可更改,用于拍照页面往回传递参数
uniapp项目中给相机相册图片添加水印功能。
jieyucx的博客
04-27 2938
废话不多说，直接上代码吧。
uniapp APP端水印相机实现
风花一世月
02-15 3575
使用插件https://ext.dcloud.net.cn/plugin?id=4892 在插件功能上增加定位，定时功能，水印相机页面每十秒重新获取一次地址，时间，增加水印生canvas文本多行换行功能 由于相机组件app不支持，所以插件使用live-pusher 直播推流组件实现的自定义相机功能。 拍照页面使用nvue，可以实现应用内拍照以及拍照画面自定义元素等功能。 水印相机...
使用uni-app实现实时拍照/视频并添加水印
qq_35309973的博客
02-23 2907
通过以上步骤，你可以在uni-app项目中实现实时拍照和录像功能，并在生成的媒体文件上添加自定义水印。记得在实际部署前进行充分的测试，以确保用户体验流畅，且水印显示正确。希望本篇博客能够帮助你掌握这一技能！
uniapp制作水印相机给图片添加水印并且保存图片至本地
lishuaihao的博客
05-14 3509
1.代码包文件：代码包文件指的是在项目目录中添加的文件。2.本地文件：通过调用接口本地产生，或通过网络下载下来，存储到本地的文件。1.本地临时文件：临时产生，随时会被回收的文件。运行时最多存储 4GB，结束运行后，如果已使用超过 2GB，会以文件为维度按照最近使用时间从远到近进行清理至少于2GB。 2.本地缓存文件：小程序通过接口把本地临时文件缓存后产生的文件，不能自定义目录和文件名。跟本地用户文件共计，小程序（含小游戏）最多可存储 200MB。 3.本地用户文件：小程序通过接口把本地临时文件缓存后产生的文
uni-app为图片添加自定义水印（解决生成图片不全问题）
qq_44910894的博客
02-01 3240
本文主要讲解了如何在uni-app中拍照或者从相册中选取到了图片之后，为这些图片动态生成可自定义的水印，并解决了生成图片不全的问题
uniapp开发实现图片添加水印
qq_45274635的博客
07-03 1466
需求：最近在开发uniapp项目，一直在加新的需求，根据要求，需要给上传图片添加水印，在网上参考了很多大佬的实现方案，自己进行了简单的封装，大家如有需要可以进行参考。首先需要获取到需要添加水印的图片。可以通过uni-app提供的文件选择器或者通过网络请求获取图片。在uni-app中，可以利用 元素来进行图片处理和绘制水印。确保你的uni-app项目已经配置好了相关开发环境和工具。1.传入图片地址，获取图片大小。4.封装主方法，进行生成。2.将图片进行压缩处理。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值