vue之原生上传图片加水印并压缩图片大小方式

npm i -s  compressorjs
npm i -s  html2canvas

import compressor from "compressorjs";
import html2canvas from "html2canvas";

/**
 * 压缩和旋转图片
 * @param {blob} file
 * @param {number} quality  压缩比例
 * @param {number} maxwidth 图片最大宽度
 * @returns {promise}
 */
export function compressor(file, drew, maxwidth = 750, quality = 0.6) {
  return new promise((resolve) => {
    new compressor(file, {
      strict: false,
      maxwidth,
      quality,
      drew,
      success: resolve,
      error(err) {
        console.log(err.message);
      },
    });
  });
}

/**
 * 添加水印
 * @param {blob} file
 * @param {string} el
 * @returns {promise}
 */
export async function addwatermarker(file, el = "#markimg", direction = "rightdown") {
  return new promise(async (resolve, reject) => {
    try {
      const maxwidth = 750;
      const img = await blobtoimg(file);
      console.log(img.naturalwidth);
      const imgwidth = img.naturalwidth > maxwidth ? maxwidth : img.naturalwidth;

      // 生成水印图片
      const markele = document.queryselector(el);
      const scale = (imgwidth * 0.25) / markele.clientwidth;
      // 先缩放水印再转成图片
      markele.style.transform = `scale(${scale})`;
      const markimg = await htmltocanvas(markele);

      // 先压缩和旋转图片
      file = await compressor(
        file,
        (context, canvas) => {
          if (direction == "rightdown") {
            // 填充水印 右下角
            context.drawimage(markimg, canvas.width - markimg.width - 15 * scale, canvas.height - markimg.height - 15 * scale, markimg.width, markimg.height);
          } else {
            // 填充水印 左下角
            context.drawimage(markimg, 15 * scale, canvas.height - markimg.height - 15 * scale, markimg.width, markimg.height);
          }
        },
        maxwidth
      );
      resolve(file);
    } catch (error) {
      reject(error);
    }
  });
}

function blobtoimg(blob) {
  return new promise((resolve, reject) => {
    let reader = new filereader();
    reader.addeventlistener("load", () => {
      let img = new image();
      img.src = reader.result;
      img.addeventlistener("load", () => resolve(img));
    });
    reader.readasdataurl(blob);
  });
}

export function htmltocanvas(el, backgroundcolor = "rgba(0,0,0,.1)") {
  return new promise(async (resolve, reject) => {
    try {
      const markimg = await html2canvas(el, {
        scale: 2,
        allowtaint: false, //允许污染
        usecors: true,
        backgroundcolor, //'transparent'  //背景色
      });
      resolve(markimg);
    } catch (error) {
      reject(error);
    }
  });
}

<template>
  <div class="content-box">
    <div class="container">
      <div class="title">点击上传图像（支持image/jpg,image/jpeg,image/png,image/gif格式图片且大小不能超过10mb）</div>
      <div class="uploadimg">
        <span class="el-icon-plus"></span>
        <input :accept="accept" type="file" class="upload_ipu" ref="fileload" @change="uploadimg" />
      </div>
      <div class="imglist">
        <img v-if="imgshow" :src="imgsrc" />
      </div>
      <img v-if="imgshow" :src="fileurl" />
      <!-- 图片上传水印 -->
      <div id="markimg">
        <div class="logo">
          图片水印：
          <img src="@/assets/logo.png" />
        </div>
        <p>文字水印：{{ loginname }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { compressor, addwatermarker } from "../utils/imageutils.js";
import apis from "@/api";
const {
  commonsys: { commonuploadfile },
} = apis;
export default {
  props: {
    accept: {
      type: string,
      default: "image/jpg,image/jpeg,image/png,image/gif",
    },
  },
  data() {
    return {
      imgshow: false,
      imgsrc: "",
      loginname: "fqniu",
      filedate: new date(),
      needwatermark: true,
      fileurl: "",
    };
  },
  // created() {
  //   this.parsetime = parsetime
  // },
  methods: {
    createurl(file) {
      if (window.url) {
        return window.url.createobjecturl(file);
      } else if (window.webkiturl) {
        return window.webkiturl.createobjecturl(file);
      } else {
        return null;
      }
    },
    async uploadimg() {
      // 这个是元素dom节点
      console.log(this.$refs.fileload);
      // 上传文件filelist
      console.log(this.$refs.fileload.files);
      let file = this.$refs.fileload.files[0];
      let size = file.size / 1024 / 1024;
      console.log(file, file.lastmodifieddate);
      if (!this.accept.includes(file.type.tolowercase())) {
        this.$message.error("图片格式不正确!");
        return false;
      }
      if (size > 10) {
        this.$message.error("图片大小不能超过10mb!");
        return false;
      }
      // 压缩图片
      // if (file.size > 512 * 1024 && file.type.includes("image/")) {
      //   file = await compressor(file);
      // }
      // 添加水印
      if (this.needwatermark) {
        const filename = file.name;
        file = await addwatermarker(file, "#markimg", "leftdown");
        file.name = filename;
      }
      this.imgsrc = this.createurl(file);
      console.log(this.imgsrc);
      console.log(file);
      this.httprequest(file);
      this.$message.success("上传成功！");
    },
    httprequest(fileobj) {
      // let fileobj = param.file; // 相当于input里取得的files
      console.log(fileobj);
      let fd = new formdata(); // formdata 对象
      fd.append("file", fileobj); // 文件对象
      commonuploadfile("qms", fd).then((res) => {
        console.log(res.fileurl);
        this.fileurl = res.fileurl;
        this.imgshow = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 50px;
}
.title {
  font-size: 16px;
  color: #73777b;
}
.uploadimg {
  margin-top: 20px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 180px;
  transition: all 0.2s;
  background: #fff;
  &:hover {
    border-color: #409eff;
  }
  span {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .upload_ipu {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 2;
  }
  img {
    width: 178px;
    height: 178px;
    position: absolute;
    border-radius: 6px;
    left: 0;
    top: 0;
    z-index: 1;
  }
}
.imglist {
  width: 550px;
  height: 400px;
  img {
    width: 100%;
    height: 100%;
  }
}
// 水印样式
#markimg {
  position: absolute;
  left: -9999999px;
  text-align: left;
  padding: 10px 15px;
  .logo {
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    display: flex;
    height: 21px;
    align-items: center;
    justify-content: flex-start;
    img {
      height: 21px;
      margin-right: 5px;
    }
  }
  p {
    margin-top: 6px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
  }
}
</style>