照片的压缩与方向校正

前言

在项目中遇见了一个这样的需求,就是需要调用手机摄像头拍照后对图片进行压缩(因为原图基本在4~6M以上),但是在iphone手机下会有一个特殊的问题,就是手机竖着拍,传上去的照片是横着的,所以需要根据Exif信息校正

推荐仓库:img_compress_rotate_preview_upload

提交了一个ratio的修复已经申请合并到仓库

demo演示,位置进行了校正,大小也进行了压缩

  • 原来仓库也充分的演示了网页中如何引用和使用,这里讲下如何在vue中引入这些js

vue中使用

因为vue中大部分都是通过(c)npm来装的插件/js,所以这里怎么引入到vue中呢

  • 在线导入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="zh_CN">
    <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.png">
    <script src="https://visiter.juncdt.com/wap/js/processImg.js"></script>
    <script src="https://visiter.juncdt.com/wap/js/exif.js"></script>
    <title>Vue</title>
    </head>
    <body>
    <noscript>
    <strong>We're sorry but visiter doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    </body>
    </html>

    这里直接在vue-cli的public/index.html引入两个js文件

    1
    Vue.prototype.mywindow = window;

    接着在src/main.js中加入这一句,指向全局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    getImg() {
    const { files } = this.$refs.choose;
    const process = this.mywindow.lzImgProcess();
    process(files, this.getCompressiveFileList, 0.3);
    },
    getCompressiveFileList(res) {
    // 获取压缩后的图片
    const that = this;
    res.forEach((blob) => {
    const reader = new FileReader();
    reader.onload = function getResult() {
    // this.result图片的url
    that.img = this.result;
    };
    reader.readAsDataURL(blob);
    });
    }

    这里用$refs来获取虚拟DOM,this.mywindow调用函数

  • 本地导入

    这里就是把在线地址换成本地的,放在public中,打包的时候路径不会被webpack转换