uniapp 拍照图片加水印

有些app拍照时需要带有时间地址水印,防止随便上传图片拍照作假之类的行为

水印相机用法

首先 组件注册

• 在需要该操作的页面引入组件并注册
  html

  	<mark-camera ref="camera">mark-camera>
  

  js

  	// 引入
  	import MarkCamera from "@/components/water-mark-camera/index.vue"
  

其次 定义一个方法跳转到拍照页面去

• 路由
  js

  	//打开相机
  		openCamera(){
       
  			uni.navigateTo({
       
  				url:'/pages/my/settings/water-mark/water-mark',
  			})
  		},
  

• 定义回调函数,函数名不可更改,用于拍照页面往回传递参数
  js

  	//回调
  	setImage(info){
       
  		this.$refs.camera.watermark(info)
  	},
  

注意:

• 拍照页面 直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
  js

  	//返回的参数 用于canvas写入画布中的数据
  	// {
       
  	// 	path: _this.snapshotsrc, //照片路径
  	// 	info: {
       
  	// 		username: this.username, //标题名
  	// 		address: this.address, //地址
  	// 		time: this.time //日期时间
  	// 	},
  	// }
  	
  	
  	//给上一页 设置
  	setImage() {
       
  		let pages = getCurrentPages();
  		let prevPage = pages[pages.length - 2]; //上一个页面
  		//直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
  		prevPage.$vm.setImage({
       
  			path: _this.snapshotsrc, //照片路径
  			info: {
       
  				username: this.username, //标题名
  				address: this.address, //地址
  				time: this.time //日期时间
  			},
  		})
  		uni.navigateBack();
  	}
  

另:拍照时的水印样式和保存后的水印样式 需要在两处调整

• 拍照时的需要在拍照页css处调整
• 保存后的为canvas后添加的样式需要在js中调整

附组件源码

<template>
	
    <view class="page">
        <view style="height: 80rpx;">view>
        <view v-if="isShowList">拍摄结果预览图，见下方view>
        <view class="img-list" v-if="isShowList">
            <view class="img-item" v-for="(item,index) in imgList" :key="index" @click="lookImg(index)">
                <image :src="item">image>
            view>
        view>
        <canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d" :style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />
    view>
template>
 
<script>
export default {
     
	props:{
     
		//显示拍摄结果预览图
		isShowList:{
     
			type:Boolean,
			default:true
		}
	},
    data() {
     
        return {
     
            windowWidth:'',
            windowHeight:'',
            imagesrc: null,
            imgList:[],
            canvasSiz:{
     
                width:188,
                height:273
            }
        };
    },
    onLoad() {
     
        // _this= this;
        // this.init();
    },
    methods: {
     
        //添加照片水印
        watermark(info){
     
			let _this = this
			_this.init();
            // console.log("获取到的数据为",info)
            uni.getImageInfo({
     
                src: info.path,
                success: function(image) {
     
                    console.log(image,_this.canvasSiz);
                    _this.canvasSiz.width =image.width;
                    _this.canvasSiz.height =image.height;
                    let maxWidth = image.width - 60; 
                    // console.log("获取最大宽度",maxWidth)
                    //担心尺寸重置后还没生效，故做延迟
                    setTimeout(()=>{
     
                        let ctx = uni.createCanvasContext('canvas-clipper', _this);
                        ctx.drawImage(
                            info.path,
                            0,
                            0,
                            image.width,
                            image.height
                        );
                        
                        //具体位置如需和相机页面上一致还需另外做计算，此处样式调整
                        ctx.setFillStyle('white');
                        ctx.setFontSize(50);
                        
                        ctx.fillText(info.info.username, <