vue中图片进行压缩之后在上传后端

最新推荐文章于 2024-05-31 15:58:01 发布

@前端小菜

最新推荐文章于 2024-05-31 15:58:01 发布

阅读量447

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48771508/article/details/128075770

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .original {
      width: 20px;
      height: 20px;
    }
  </style>
</head>
<body>
  <input type="file" onchange="updateFile(event)">
    <select id="sel">
      <option>1.0</option>
      <option>0.9</option>
      <option>0.5</option>
      <option>0.1</option>
    </select>
    <a class="generate" onClick="generate()">生成</a>
    <div class="original" id="original"></div>
    <div class="production" id="production"></div>
  <script>
    /**
   * 给input绑定事件
   */
  async function updateFile(e) {
    const file = e.target.files[0];
    if (!verify(file)) {
      //参数校验
      return false;
    }
    const base64Code = await getBase64(file); //获取base64编码
    placeImg(base64Code); //放置图片
  }
  /**
   * 参数校验
   * @param {*} file
   */
  function verify(file) {
    const { size, type } = file;
    if (size > 5 * 1024 * 1024) {
      alert('上传图片大小不能超过5M');
      return false;
    }
    if ('image/png' !== type) {
      alert('请上传图片');
      return false;
    }
    return true;
  }
  function getBase64(file) {
    return new Promise((resolve) => {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        resolve(e.target.result);
      };
      fileReader.readAsDataURL(file);
    });
  }
  /**
   * 给图片设置合适的宽高放置在容器中
   */
  function placeImg(code) {
    const target = document.getElementById('original');
    const max_width = parseInt(getComputedStyle(target).width);
    const max_height = parseInt(getComputedStyle(target).height);
    let width, height;
    const image = new Image();
    image.src = code;
    image.onload = () => {
      const naturalWidth = image.naturalWidth;
      const naturalHeight = image.naturalHeight;
      const radio = naturalWidth / naturalHeight;
      if (radio >= 1) {
        //宽比高大
        width = naturalWidth < max_width ? naturalWidth : max_width;
        height = (width * 1) / radio;
        if (height > max_height) {
          height = max_height;
          width = height * radio;
        }
      } else {
        height = naturalHeight < max_height ? naturalHeight : max_height;
        width = height * radio;
        if (width > max_width) {
          width = max_width;
          height = (width * 1) / radio;
        }
      }
      width = parseInt(width);
      height = parseInt(height);
      image.style.width = `${width}px`;
      image.style.height = `${height}px`;
      target.innerHTML = '';
      target.appendChild(image);
      img = image; //将预览图对象赋值给全局变量img
      compress();
    };
  }

/**
   * 压缩图片
   */
   function compress() {
    if (!img) { //img是预览图对象
      return false;
    }

    const value = Number(document.getElementById('sel').value);
    const canvas = document.createElement('CANVAS');
    const w = img.width,
          h = img.height;
    canvas.width = w;
    canvas.height = h;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, w, h);
    const code = canvas.toDataURL('image/png', value);
    const image = new Image();
    image.src = code;
    image.onload = () => {
      const des = document.getElementById('production');
      des.innerHTML = '';
      des.appendChild(image);
      compress_img = image;
    };
  }
  /**
   * 下载图片
   * @param {*}
   */
  function generate() {
    if (!compress_img) {
      return false;
    }
    const a = document.createElement('A');
    a.href = compress_img.src;
    a.download = 'download';
    a.click();
  }
  </script>

</body>
</html>