更新记录

1.0.1（2024-09-12） 下载此版本

修复生成的水印图片文字不加粗的bug

1.0.0（2024-09-09） 下载此版本

通过live-pusher组件实现拍照，然后使用webview对照片添加水印

平台兼容性

uni-app

uni-app x

watasi-watermark-camera 水印相机

插件地址：watasi-watermark-camera 水印相机

仅支持nvue页面，仅支持APP

仅支持nvue页面，仅支持APP

仅支持nvue页面，仅支持APP

不支持vue3

使用说明

watermark

示例(nvue)

<template>
    <view class="watermark-page">
        <watasi-watermark-camera :watermark="watermark" @ready="ready" @snapshot="snapshot" @change="change" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                watermark: []
            };
        },

        methods: {
            ready(e) {
                const { height, width } = e
                this.watermark = [{
                    type: 'text',
                    x: uni.upx2px(24),
                    y: height - uni.upx2px(150),
                    color: '#fff',
                    size: uni.upx2px(68),
                    text: "14:04",
                    isBold: true
                }, {
                    type: "fillRect",
                    x: uni.upx2px(232),
                    y: height - uni.upx2px(150),
                    w: uni.upx2px(4),
                    h: uni.upx2px(78),
                    color: "#f60"
                }, {
                    type: 'text',
                    x: uni.upx2px(260),
                    y: height - uni.upx2px(150),
                    color: '#fff',
                    size: uni.upx2px(30),
                    text: "2024-09-09",
                }, {
                    type: 'text',
                    x: uni.upx2px(260),
                    y: height - uni.upx2px(100),
                    color: '#fff',
                    size: uni.upx2px(30),
                    text: "星期一"
                }, {
                    type: 'text',
                    x: uni.upx2px(24),
                    y: height - uni.upx2px(48),
                    color: '#fff',
                    size: uni.upx2px(28),
                    text: '江苏省苏州市科技城软件大厦'
                }, {
                    type: 'image',
                    url: 'https://bpic.588ku.com/element_origin_min_pic/00/15/94/7556aeca8408555.jpg',
                    x: width - uni.upx2px(84),
                    y: height - uni.upx2px(84),
                    w: uni.upx2px(60),
                    h: uni.upx2px(60),
                }]
            },

            snapshot() {
                uni.showLoading({
                    mask: true
                })
            },

            change(base64) {
                console.log(base64);
                console.log("执行上传操作");
                uni.hideLoading()
            }
        }
    }
</script>

<style lang="scss">
    .watermark-page {
        flex: 1;
    }
</style>

其他说明

• 如果出现image没有成功绘制到照片上的情况，请检查图片是否可以跨域访问
• 默认打开前置摄像头，如果需要默认打开后置摄像头，可以在ready回调里调用切换前后摄像头方法this.$refs.watermark.switchCamera()