更新记录

1.0.6（2023-04-08）

去掉无用依赖

1.0.5（2023-04-08）

• 修复H5有些图片出现半截空白
• 有问题请描述使用场景，最好能把图片贴出来，以便更好的优化兼容性

1.0.4（2023-03-31）

• 微信小程序IOS已测暂没发现问题，H5有些图片出现半截空白，暂时不完美有空再继续优化~
• 有问题请描述使用场景，最好能把图片贴出来，以便更好的优化兼容性

平台兼容性

图片增加文字水印

**组件名：hpy-watermark 图片增加文字水印，支持拍照和相册选取多张

API

Props

methods

使用示例

    <template>
        <view>
            <button @click="chooseImage">选择照片</button>
            <!-- 增加水印 -->
            <hpy-watermark ref="watermark" @waterMark="waterMark"></hpy-watermark>
            <view class="ul">
                <view class="li" v-for="(item, index) in imageList" :key="index">
                    <image :src="item" class="img" mode="widthFix"></image>
                </view>
            </view>
        </view>
    </template>

<script>
    export default {
        data() {
            return {
                imageList:[]
            }
        },
        methods: {
            // 选择图片
            chooseImage() {
                uni.chooseImage({
                    count: this.limit,              // 限制的图片数量
                    sizeType: ['compressed'],       // original 原图，compressed 压缩图，默认二者都有 
                    sourceType: ['album', 'camera'],// album 从相册选图，camera 使用相机，默认二者都有
                    success: (res) => {
                        var imgPathList = res.tempFilePaths;
                        if(imgPathList.length > 0){
                            this.addImages(imgPathList);
                        }
                    },
                    fail: (err) => {
                        console.log('chooseImage fail', err)
                        if("chooseImage:fail cancel" == err.errMsg){
                            uni.showToast({
                                icon:'none',
                                title:'取消了选择'
                            });
                        }else{
                            // #ifdef MP
                            uni.getSetting({
                                success: (res) => {
                                    let authStatus = res.authSetting['scope.album'];
                                    if (!authStatus) {
                                        uni.showModal({
                                            title: '授权失败',
                                            content: '系统上传需要从您的相册获取图片，请在设置界面打开相关权限',
                                            success: (res) => {
                                                if (res.confirm) {
                                                    uni.openSetting();
                                                }
                                            }
                                        })
                                    }
                                }
                            })
                            // #endif
                        }
                    }
                });
            },
            // 添加图片
            addImages(filePaths){
                if(filePaths.length > 0){
                    var fillTexts = ["人员：张三", "地址：广东省珠海市香洲区XXX"];
                    fillTexts.push("时间：" + this.getNowTime());
                    // 添加水印
                    this.$refs.watermark.addWaterMark({
                        filePaths,
                        fillTexts
                    });
                }
            },
            /**
             * 水印添加回调，在H5平台下，filePath 为 base64
             */
            waterMark(filePath){
                this.imageList.push(filePath);
            },
            /**
             * 获取当前时间
             */
            getNowTime(){
                var date = new Date(),
                year = date.getFullYear(),
                month = date.getMonth() + 1,
                day = date.getDate(),
                hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
                minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
                second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                month >= 1 && month <= 9 ? (month = "0" + month) : "";
                day >= 0 && day <= 9 ? (day = "0" + day) : "";
                return (year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
            }
        }
    }
</script>

<style scoped>
    .ul{border: rgb(221, 221, 221) solid 1px; text-align: center; margin-right: 12px; position: relative }
    .ul .li .img{display:block; width: 80px; height: 80px;}
</style>