vue、js实现图片等比压缩，等比缩放完整demo-阿里云开发者社区

vue、js实现图片等比压缩，等比缩放完整demo

2022-10-17 434

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue、js实现图片等比压缩，等比缩放完整demo

<!DOCTYPE>
<html>
    <head>
      <meta name="baidu-site-verification" content="LDyoKvyTEK" />
        <link rel="shortcut icon " type="images/x-icon" href="img/gt.ico">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>图片等比处理</title>
    <style type="text/css">
      img {
        width: 300px;
        height: auto;
      }
    </style>
    </head>
    <body class="base-transition">
        <div class="page-wrap homepage" id="vue" v-cloak>
      <p>选择的图片任意一边大于1024，以最长边等比压缩图片，否则不处理</p>
      <input id="photo" type="file" accept="image/png,image/jpeg,image/jpg" @change="handkeFileChange($event)" />
      <h4>
        <span>选择图片长：<span>{{sw}}px</span>&nbsp;&nbsp;&nbsp;&nbsp;宽：<span>{{sh}}px</span></span>
        <br />
        <span>处理后图片长：<span>{{rw}}px</span>&nbsp;&nbsp;&nbsp;&nbsp;宽：<span>{{rh}}px</span></span>
      </h4>
      <img :src="usableImage" />
        </div>
        <script type="text/javascript" src="js/vue.min.js" ></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
      var vue = new Vue({
        el: '#vue',
        data: {
          usableImage: '',
          sw: 0,
          sh: 0,
          rw: 0,
          rh: 0
        },
        computed: {},
        watch: {},
        mounted: function() {},
        methods: {
          handkeFileChange: function(event) {
            let that = this;
            that.gate = false;
            let file = event.target.files[0];
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(event) {
              that.imageSrc = event.target.result;
              //加载图片获取图片真实宽度和高度
              let image = new Image();
              image.onload = function() {
                let width = image.width;
                that.sw = width;
                let height = image.height;
                that.sh = height;
                if(width > 1024 && width > height) {
                  that.dealImage(that.imageSrc, {
                    width: 1024,
                    quality: 1
                  }, function(base) {
                    that.usableImage = base;
                  })
                } else if(height > 1024 && height > width) {
                  that.dealImage(that.imageSrc, {
                    height: 1024,
                    quality: 1
                  }, function(base) {
                    that.usableImage = base;
                  })
                } else {
                  that.rw = width;
                  that.rh = height;
                  that.usableImage = that.imageSrc;
                }
              }
              image.src = that.imageSrc;
            }
          },
          /**
           * 图片压缩，默认同比例压缩
           * @param {Object} path 
           *   pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
           * @param {Object} obj
           *   obj 对象 有 width， height， quality(0-1)
           * @param {Object} callback
           *   回调函数有一个参数，base64的字符串数据
           */
          dealImage: function(path, obj, callback) {
            let ts = this;
            var img = new Image();
            img.src = path;
            img.onload = function() {
              var that = this;
              // 默认按比例压缩
              var w = that.width,
                h = that.height,
                scale = w / h;
              w = obj.width || (obj.height * scale);
              h = obj.height || (obj.width / scale);
              var quality = 0.7; // 默认图片质量为0.7
              //生成canvas
              var canvas = document.createElement('canvas');
              var ctx = canvas.getContext('2d');
              // 创建属性节点
              var anw = document.createAttribute("width");
              anw.nodeValue = w;
              ts.rw = w;
              var anh = document.createAttribute("height");
              anh.nodeValue = h;
              ts.rh = h;
              canvas.setAttributeNode(anw);
              canvas.setAttributeNode(anh);
              ctx.drawImage(that, 0, 0, w, h);
              // 图像质量
              if(obj.quality && obj.quality <= 1 && obj.quality > 0) {
                quality = obj.quality;
              }
              // quality值越小，所绘制出的图像越模糊
              var base64 = canvas.toDataURL('image/jpeg', quality);
              // 回调函数返回base64的值
              callback(base64);
            }
          }
        }
      });
    </script>
    </body>
</html>

vue、js实现图片等比压缩，等比缩放完整demo

热门文章

最新文章

相关课程

相关电子书

相关实验场景