vue处理图片添加水印

elementui把上传的图片转为base64:

<template>
    <div> 
         <el-upload
            class="upload-demo"
            drag
            action=""
            :on-change="getFile"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :limit="1"
           :on-remove="handremove"
            list-type="picture" >
            <i class="el-icon-upload"></i>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
          </el-upload>
      <img :src="img" alt="">
    </div>
</template>

<script>
     export default {
        data() {
          return {
              fileList: [],
        img:''
            }
        },
        methods: {
            //自定义一个方法，用来把图片内容转为base64格式
            getBase64(file) {
                  return new Promise(function(resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = "";
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                      imgResult = reader.result;
                    };
                    reader.onerror = function(error) {
                      reject(error);
                    };
                    reader.onloadend = function() {
                      resolve(imgResult);
                    };
                  });
                },
            //获取文件的内容
            getFile(file, fileList) {
        
          //限制用户上传格式 和大小
        //截取上传文件后缀名判断格式
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
        const isJPG = testmsg === 'jpg';
        const isPNG = testmsg === 'png';
        //计算上传文件大小
        const isLt2M = file.size / 1024 / 1024 < 2;
                
        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
          this.fileList=[]
          return
        }
        
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          this.fileList=[]
          return
        }
         
        
                //用file.raw就可以获取文件的内容了。
                console.log(file.raw)
                //调用方法
                 this.getBase64(file.raw).then(res => {
                       console.log(res)
             this.img=res
                       });
                },
          //提示限制的个数 :limit="1"  drag 拖拽
          handleExceed(files, fileList) {
                  this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
                },
   
    //文件列表移除文件时的钩子
    handremove(file, fileList){
      this.img=''
    },
        }
  }
</script>

图片压缩转码 在转回file:

<template>
    <div>
        <!-- 预览压缩之后的文件图片 -->
        <div>
            <img src="" id="img">  
        </div>
        <input type="file"   @change="change" />
    </div>
</template>

<script>
    export default{
        methods:{
            // 监听上传文件的变化
            change(e){
                let fileObj=e.target.files[0]  //获取文件类型
                console.log(fileObj) //原文件类型 大小
                //调用方法
                this.compressFile(fileObj,function(files){
                    console.log(files)
                })  
            },
            //压缩图片
            compressFile(file,callback){
                let fileObj=file; //文件类型
                let reader=new FileReader();//创建读取文件对象
                reader.readAsDataURL(fileObj)//调用方法转base64
                reader.οnlοad=function(e){ //文件读取成功完成的触发
                    let image=new Image(); //新建一个img标签(还没嵌入DOM节点)
                    image.src=e.target.result;//读取结果 下载图片
                    image.οnlοad=function(){ //绑定事件 下载完成
                        let canvas=document.createElement('canvas');//新建canvas
                        let context=canvas.getContext('2d');//获取画笔对象
                        let imageWidth=image.width/2 //压缩后图片的大小  对半压缩
                        let imageHeight=image.height/2
                        let data=''
                        canvas.width=imageWidth  //画布的宽高
                        canvas.height=imageHeight
                        //使用drawImage重新设置img标签中的图片大小，实现压缩，
                        context.drawImage(image,0,0,imageWidth,imageHeight) //绘制图像
                        data=canvas.toDataURL('image/jpeg'); //输出压缩后的base64
                        //将压缩后的图片显示到页面上的img标签  预览图片
                        document.getElementById('img').src=data;
                        //重新转回file文件格式
                        let arr=data.split(',')
                        let mime=arr[0].match(/:(.*?);/)[1]
                        let bstr=atob(arr[1])
                        let n=bstr.length
                        let u8arr=new Uint8Array(n);
                        while (n--){
                            u8arr[n]=bstr.charCodeAt(n);
                        }
                        let files=new File([new Blob([u8arr],{type:mime})],'test.jpeg',{type:'image/jpeg'})
                        callback(files) //回调
                    }
                }
            }
        },
    }
</script>

给上传的照片添加水印:

<template>
    <div>
        <!-- 预览压缩之后的文件图片 -->
        <el-upload
          class="upload-demo"
          drag
          :before-upload="allFileBeforeUpload"
          list-type="picture"
          action="/api/upload"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </div>
</template>

<script>
    export default{
        methods:{
            // 上传前
                  allFileBeforeUpload(file){
                    var fileType = file.type
                    //console.log(fileType)   //image/jpeg
                     //includes() 方法用于判断字符串是否包含指定的子字符串
                    if(fileType.includes('image')){
                      var uid = file.uid
                     return new Promise((resolve, reject) => {
                      this.transformFile(file).then(res => {
                       console.log(res)
                        //装换之后 file的uid丢失
                          res.uid = uid
                          resolve(res)
                      }).catch(error => {
                          reject(error)
                      })
                    }) 
                    }
                  },
        //转换文件  添加水印
              transformFile(file) {
                  //promise执行多步操作非常好用，这个过程是有一定的顺序的，你必须保证上一步完成，才能顺利进行下一步。
                  //有两个参数 resolve同意的意思  reject拒绝的意思
                return new Promise(resolve => {
                  const reader = new FileReader();//创建读取文件对象
                  reader.readAsDataURL(file);//调用方法转base64
                  reader.onload = () => { //文件读取成功完成的触发
                    const canvas = document.createElement('canvas'); //新建canvas 画布
                    const img = document.createElement('img'); //新建一个img标签
                    img.src = reader.result; //读取结果 下载图片
                    img.onload = () => { //绑定事件 下载完成
                      const ctx = canvas.getContext('2d');//获取画笔对象
                      let width = img.width; //图片的宽高
                      let height = img.height;
                      canvas.width = width;//画布的宽高
                      canvas.height = height;
                      ctx.drawImage(img, 0, 0, width, height);//绘制图像 图片大小没变
                      ctx.fillStyle = '#ffffff';// 设置填充字号和字体，样式
                      ctx.textBaseline = 'middle';
                      // 设置右对齐
                      ctx.textAlign = 'right'
                      ctx.rotate(0*Math.PI/180);//旋转画笔 角度
                      ctx.globalAlpha = 0.4; //透明度
                      if(2000000 < width * height && width * height < 4000000){
                        ctx.font="80px Arial";
                      }else if(width * height > 4000000){
                        ctx.font="100px Arial";  // 设置文本大小和字体
                        ctx.fillText('仅 供 测 试 使 用', width/1.5, height/8); //绘制填充文本(str,x,y) 填充字体的 坐标
                        ctx.fillText('仅 供 测 试 使 用', width-20, height-20);// 在指定位置绘制文字，这里指定距离右下角20坐标的地方
                      }else{
                        ctx.font="30px Arial";
                      }
                      ctx.fillText('仅 供 测 试 使 用', width/8, height/8);
                      ctx.fillText('仅 供 测 试 使 用', width-20, height-20);// 在指定位置绘制文字，这里指定距离右下角20坐标的地方
                      /* canvas.toBlob(resolve); */
                      //压缩图片质量 范围 0~1
                      let dataUrl = canvas.toDataURL("image/jpeg", 0.5) //输出压缩后的base64
                      //执行下一步操作  将裁剪base64的图片转换为file文件
                      resolve(this.dataURLtoFile(dataUrl, file.name))
                    };
                  };
                });
              },
            // 将裁剪base64的图片转换为file文件
                  dataURLtoFile(dataurl, filename) {
                      let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                      while (n--) {
                          u8arr[n] = bstr.charCodeAt(n);
                      }
                      return new File([u8arr], filename, {type: mime});
                  },
        }
    }
</script>