前端上傳圖片到oss，壓縮圖片后上傳至oss（補充圖片文件旋轉90度問題）

上傳圖片如果過大，等待時間過長體驗不好，於是使用js壓縮圖片再上傳，無關圖片清晰度。

 /**
    * 壓縮圖片
    * @param file 圖片文件
    * @param callback 回調函數，壓縮完要做的事，例如ajax請求等。
   */
  compressFile(file,callback){
    let fileObj = file;
    let reader = new FileReader()
    reader.readAsDataURL(fileObj) //轉base64
    reader.onload = function(e) {
        let image = new Image() //新建一個img標簽（還沒嵌入DOM節點)
        image.src = e.target.result
        image.onload = function () {
            let canvas = document.createElement('canvas'), // 新建canvas
            context = canvas.getContext('2d'),
            imageWidth = image.width / 4,    //壓縮后圖片高度和寬度
                    imageHeight = image.height / 5,
                    data ='';
            canvas.width = imageWidth
            canvas.height = imageHeight
            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            data = canvas.toDataURL('image/jpeg',0.1) // 0.1壓縮至以前的0.1倍
            let arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 轉成blob
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            let files = new window.File([new Blob([u8arr], {type: mime})], 'test.jpeg', {type: 'image/jpeg'}) // 轉成file
            callback(files) // 回調
        }
    }
},
圖片壓縮完畢后就會毀掉callback函數

 

上傳拿到文件進行判斷大小是否需要壓縮。需要壓縮就使用壓縮方法，通過回調函數進行操作。

這里需要特別注意，因為我使用的是iview，一直習慣了this方法調用函數，如果在這里函數調用函數的話，此this非彼this，所以就需要使用$this來進行接收外面的this，從而調用外面的uploads函數方法。

依賴阿里雲的

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

封裝密鑰

 

進行圖片上傳

 

參數分別是文件名字，和文件

 

 

 

后面發現拍照文件如果原圖是旋轉的話，傳上去的話也會是旋轉的圖片，這里就需要再將它轉回來。

<script src="/app/plugins/exif-js-master/exif.js"></script> 下載依賴exif.js

//獲取圖片屬性
getPhotoOrientation(img,callback){
    var orient;
    EXIF.getData(img, function () {
        orient = EXIF.getTag(img, 'Orientation');
        callback(orient);
    });
    // callback(orient);
    // this.orient=orient;
},
通過此方法可以獲取圖片的屬性，根據orient值來得到是旋轉多少

 

 

然后在畫板圖片繪制的時候進行判斷，是否有旋轉，如果有旋轉再將他轉正