利用vant组件上传照片 修改自定义上传照片样式 exif插件整理照片旋转 照片添加水印

前端只能简单压缩一次，循环压缩 安卓没问题 iphone 会卡死机
安装exif-js

cnpm i exif-js --save
npm i exif-js --save

当前页面引入

import EXIF from 'exif-js'

html 代码

<label for='uploadOne' class='photo-main' >
   <div class="show">
        <div class="picture">
            <img style="width:100%" :src="url" alt="">
        </div>
    </div>
</label>
<div v-show="false">
    <van-uploader id="uploadOne" max-count="1" :after-read="afterReadOne" >
    </van-uploader>
</div>`

afterReadOne(file){
    this.imgData(file)
},
imgData(file){
    this.global.loadingStart('正在上传图片,请稍等……')
    this.url = file.content
    let img = document.createElement('img')
    img.src = file.content
    let num = ''
    let base64 = file.content
    if(base64.length/1024*3/4 < 200){  // 500k 以内
        num = 0.9
    }else if(base64.length/1024*3/4 > 500 && base64.length/1024*3/4 <= 1024){  //  500k 到 1M
        num = 0.8
    }else if(base64.length/1024*3/4 > 1024 && base64.length/1024*3/4 <= 3072){  // 1M 到 3M
        num = 0.4
    }else if(base64.length/1024*3/4 > 3072 && base64.length/1024*3/4 <= 5120){  // 3M 到 5M
        num = 0.2
    }else if(base64.length/1024*3/4 > 5120 && base64.length/1024*3/4 <= 8192){
        num = 0.15
    }else if(base64.length/1024*3/4 > 8192 && base64.length/1024*3/4 <= 10240){
        num = 0.08
    }else{
        num = 0.04
    }
    this.canvasDataURL(img,{'quality' :num}, file.file.type)
},
canvasDataURL(img,obj,type){
    img.onload = () =>{
        let width = img.width,
            height = img.height;
        let orient = this.getPhotoOrientation(img)
        
        let quality = 0.7;
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        let max_width = 1600
        let max_height = 900
        if(height>width){
            max_width = 900;
            max_height = 1600;
        }
        if (width > max_width) {
            height *= max_width / width;
            height = Math.round(height);
            width = max_width;
        }
        if (height > max_height) {
            width *= max_height / height;
            width = Math.round(width);
            height = max_height;
        }
        if(width < max_width&&height < max_height){
            width = max_width;
            height = max_height;
        }
        if (orient == 6) {
            canvas.width = height;
            canvas.height = width;
            ctx.save();//保存状态
            ctx.translate(0, 0);//设置画布上的(0,0)位置，也就是旋转的中心点
            // 执行Canvas的drawImage语句
            ctx.rotate(90 * Math.PI / 180);//把画布旋转90度
            ctx.drawImage(img, 0, -height, width, height);//把图片绘制在画布translate之前的中心点，
            ctx.restore();
        } else if (orient == 8) {
            canvas.width = width;
            canvas.height = height;
            ctx.save();//保存状态
            ctx.translate(0, 0);//设置画布上的(0,0)位置，也就是旋转的中心点
            // 执行Canvas的drawImage语句
            ctx.rotate(270 * Math.PI / 180);//把画布旋转90度
            ctx.drawImage(img, -width, 0, width, height);//把图片绘制在画布translate之前的中心点，
            ctx.restore();
        } else if (orient == 3) {
            canvas.width = width;
            canvas.height = height;
            ctx.save();//保存状态
            ctx.translate(0, 0);//设置画布上的(0,0)位置，也就是旋转的中心点
            // 执行Canvas的drawImage语句
            ctx.rotate(-180 * Math.PI / 180);//把画布旋转90度
            ctx.drawImage(img, -width, -height, width, height);//把图片绘制在画布translate之前的中心点，
            ctx.restore();
        } else {
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
        }
        var basePx=canvas.width;
        //字体大小  照片添加水印
        var fontSize=basePx/25;
        ctx.shadowColor = 'rgba(0, 0, 0,1)';
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;
        ctx.shadowBlur = 5;
        ctx.font = fontSize+"px 微软雅黑";
        ctx.fillStyle = "rgba(255,255,255,0.8)";
        var watermark = "水印" + "|" + '2021-12-07 11:47' + "|" ;
        var watermarkSplit = watermark.split("|");
        ctx.fillText(watermarkSplit[0],canvas.width-watermarkSplit[0].length*fontSize,canvas.height-2.7*fontSize);
        ctx.fillText(watermarkSplit[1],canvas.width-watermarkSplit[0].length*fontSize,canvas.height-1.5*fontSize);
        ctx.fillText(watermarkSplit[2],canvas.width-watermarkSplit[0].length*fontSize,canvas.height-0.5*fontSize);

        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
            quality = obj.quality;
        }
        let base64 = canvas.toDataURL(type, quality);
        if (base64.length/1024*3/4 < 10) {
            this.$dialog.alert({
                message:"图片质量过低，请重新上传！"
            }).then(()=>{
                return ''
            })
            return '';
        } else {
            // 调用接口
        }
    }
},
getPhotoOrientation(img) {
    var orient;
    EXIF.getData(img, function () {
        orient = EXIF.getTag(this, 'Orientation');
    });
    return orient;
},