js 图片上传 压缩、旋转的解决方法

香菊网 发表于: 2019-07-08 分类: 前端front  软件soft  H5部分  HTML&CSS  

上传图片的时候使用 base64 编码的照片会比原照片大,那么上传的时候进行压缩就非常有必要的。本篇主要内容主要是 前端在图片上传的时候图片发生旋转、压缩问题的解决方案。旋转的解决方案是获取图片的 Orientation 变量(香菊网

旋转:

当你使用手机的时候有时候图片里面会存一个  Orientation 字段,

旋转角度    参数值

0°              1

90°            6

-90°           8

180°          3

参数为 1 的时候显示正常,那么在这些横拍显示正常,即 Orientation = 1 的手机上,竖拍的参数为 6。

当然不是每个图片都会有这个属性的

想要获取 Orientation 参数,可以通过 exif.js 库来操作。exif.js 功能很多,

npm install exif-js --save    

<script src="vendors/exif-js/exif-js"></script>

exif.js 获取 Orientation :

let file = inputDOM.files[0]
EXIF.getData(file, function() {  

    var Orientation = EXIF.getTag(this, 'Orientation');

});

旋转画布

ctx.rotate(angle);

压缩:

手机拍出来的照片太大,而且使用 base64 编码的照片会比原照片大,那么上传的时候进行压缩就非常有必要的。现在的手机像素这么高,拍出来的照片宽高都有几千像素,用 canvas 来渲染这照片的速度会相对比较慢。

其一根据 缩放尺寸进行压缩

        image.onload = function () {
          var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            data = '',
            scales = 0.5;

          let imgWidth = Math.ceil(this.width * scales);
          let imgHeight = Math.ceil(this.height * scales);
          

          canvas.width = imgWidth;
          canvas.height = imgHeight;
          context.drawImage(this, 0, 0, imgWidth, imgHeight);
        }

其二根据 图片质量压缩

var data = canvas.toDataURL('image/jpeg', 0.1);

console.log('压缩后')
console.log(data)

文件全部内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>上传图片压缩</title>

</head>

<body>
  <input type="file" name="upimg" id='up'>
  <div class="box">
    <img src="" alt="" id="upimg">
    <img src="" alt="" id="upimg2">
  </div>
</body>
<script src="./exif.js"></script>
<script>
  window.onload = () => {
    let upDOM = document.getElementById('up')
    upDOM.addEventListener('change', (e) => {
      console.log(e)
      console.log(upDOM.files[0])
      var reader = new FileReader();
      reader.readAsDataURL(upDOM.files[0]);
      let Orientation = '';
      if (upDOM.files[0]) {
        EXIF.getData(upDOM.files[0], function () {

          Orientation = EXIF.getTag(this, 'Orientation');

        });
      }

      reader.onload = function (ie) {
        var re = this.result;
        console.log('压缩前')
        console.log(re)

        console.log('旋转参数', Orientation)
        var image = document.getElementById('upimg');
        var image2 = document.getElementById('upimg2');
        image.onload = function () {
          var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            data = '',
            scales = 0.5;

          let imgWidth = Math.ceil(this.width * scales);
          let imgHeight = Math.ceil(this.height * scales);

          // 手机拍的图片会发生旋转
          if (Orientation && Orientation != 1) {
            switch (Orientation) {
              case 6: // 旋转90度
                canvas.width = imgHeight;
                canvas.height = imgWidth;
                context.rotate(Math.PI / 2);
                context.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                break;
              case 3: // 旋转180度
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                context.rotate(Math.PI);
                context.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                break;
              case 8: // 旋转-90度
                canvas.width = imgHeight;
                canvas.height = imgWidth;
                context.rotate(3 * Math.PI / 2);
                context.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                break;
            }
          } else {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            context.drawImage(this, 0, 0, imgWidth, imgHeight);
          }
          var data = canvas.toDataURL('image/jpeg', 0.1);
          // 压缩完成执行回调  
          console.log('压缩后')
          console.log(data)
          image2.setAttribute('src', data);
        };
        image.setAttribute('src', this.result);

      }
    })
  }
</script>

</html>
标签: 前端front软件softH5部分HTML&CSS
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮