新增水印

   //生成水印文字
        createWmWord() {
            console.log(this.curPosiInfo);
            let time = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');//拍摄时间
            let posi = this.curPosiInfo.address ? this.curPosiInfo.address : '-'
            let lon = '经度：' + (this.curPosiInfo.lon ? this.curPosiInfo.lon : '-');
            let lat = '纬度：' + (this.curPosiInfo.lat ? this.curPosiInfo.lat : '-');
            return {
                shootTime: '拍摄时间：' + time,
                shootPosi: '拍摄地点：' + posi,
                gpsCoords: lon + "，" + lat
            }
        },
        getImgUrl({
            url = '',
            fillStyle = 'rgba(238, 10, 36, 0.8)',
            content = '',
            cb = null,
        }) {
            const img = new Image()
            img.src = url
            img.crossOrigin = 'anonymous'
            img.onload = function () {
                const canvas = document.createElement('canvas')
                canvas.width = img.width
                canvas.height = img.height
                const ctx = canvas.getContext('2d')
                ctx.drawImage(img, 0, 0)
                let lineHeight = img.height / 15; //每行站1/15的canvas高度
                let wordWidth = img.width / 28; //单个字占1/28的canvas宽度
                ctx.font = wordWidth + 'px Arial'
                ctx.fillStyle = fillStyle
                // 单独绘制水印
                let tempStr = content.shootPosi;
                // let tempStr = '浙江省哈哈哈哈哈浙江省哈哈哈哈哈浙江省哈哈哈哈哈浙江省哈哈哈哈哈浙江省哈哈哈哈哈浙江省哈哈哈哈哈';
                let lineWidth = 0;
                let lastSubStrIndex = 0;
                let initY = img.height - 1.5 * lineHeight; //只预留两行的地址位置
                let lineNum = 1;
                for (let i = 0; i < tempStr.length; i++) {
                    lineWidth += ctx.measureText(tempStr[i]).width;
                    if (lineWidth > canvas.width * 0.85) {
                        ctx.fillText(tempStr.substring(lastSubStrIndex, i), 10, initY);
                        initY += lineHeight;
                        lineWidth = 0;
                        lastSubStrIndex = i;
                        lineNum++
                    }
                    if (i == tempStr.length - 1) {
                        ctx.fillText(tempStr.substring(lastSubStrIndex, i + 1), 10, initY);
                        //当只有一行内容时，在此处补上此行的计数
                        lineNum === 1 ? lineNum++ : lineNum--
                    }
                }
                ctx.fillText(content.shootTime, 10, img.height - ((lineNum + 1.5) * lineHeight), img.width - 10)
                ctx.fillText(content.gpsCoords, 10, img.height - ((lineNum + 0.5) * lineHeight), img.width - 10)
                // 将绘制完成的canvas转换为base64的地址
                const base64Url = canvas.toDataURL()
                // return base64Url
                cb && cb(base64Url)
            }
        },
        base64ToFile(urlData, fileName) {
            const arr = urlData.split(',')
            const mime = arr[0].match(/:(.*?);/)[1]
            const bytes = atob(arr[1]) // 解码base64
            let n = bytes.length
            const ia = new Uint8Array(n)
            while (n--) {
                ia[n] = bytes.charCodeAt(n)
            }
            return new File([ia], fileName, { type: mime })
        },
        beforeRead(file) {


            console.log('qqq')
            this.$toast.loading('处理中');
            return new Promise((resolve) => {
                const fileName = file.name
                const reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => {
                    this.getImgUrl({
                        url: reader.result,
                        content: this.createWmWord(),
                        cb: (base64) => {
                            const file = this.base64ToFile(base64, fileName)
                            compressAccurately(file, 500).then(res => {
                                resolve(res)
                            }).catch(() => {
                                this.$toast('上传图片失败')
                            })
                        }
                    })
                }
            })

        },

import { compressAccurately } from 'image-conversion'

import dayjs from 'dayjs'