上傳圖片，圖片過大壓縮處理以及解決自拍時會出現圖片橫屏的bug修復、長按保存圖片

js部分：
module.exports = {
    resize: function (file, callback, options) {
        //配置
        options = Object.assign({
            maxWidth: 1920,
            maxHeight: 1920
        }, options || {});

        var reader = new FileReader();
        reader.onload = function () {
            var imageData = this.result;
            //加載圖片獲取圖片真實寬度和高度
            var image = new Image();
            image.src = imageData;
            image.onload = function () {
                // 獲取圖片旋轉角度
                var orientation = 1
                EXIF.getData(image, function() {
                    orientation = EXIF.getTag(this, "Orientation");
                });

                var width = image.width;
                var height = image.height;
                var scale = Math.max(width / options.maxWidth, height / options.maxHeight);
                //寬度或高度計算
                if (scale > 1) {
                    var w = Math.round(width / scale);
                    var h = Math.round(height / scale);
                    //生成canvas
                    var canvas = document.createElement('canvas');
                    var ctx = window.ctx = canvas.getContext('2d');
                    ctx.save()
                    switch(orientation){
                        case 6:
                            console.log('須要順時針（向左）90度旋轉');
                            canvas.width = h;
                            canvas.height = w;
                            ctx.translate(canvas.width/2,canvas.height/2);
                            ctx.rotate(90 * Math.PI / 180)
                            ctx.drawImage(this, -w / 2, -h / 2, w, h);
                            break;
                        case 8:
                            console.log('須要逆時針（向右）90度旋轉');
                            canvas.width = h;
                            canvas.height = w;
                            ctx.translate(canvas.width/2,canvas.height/2);
                            ctx.rotate(-90 * Math.PI / 180)
                            ctx.drawImage(this, -w / 2, -h / 2, w, h);
                            break;
                        default:
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(this, 0, 0, w, h);
                            break
                    }
                    ctx.restore()
                    imageData = canvas.toDataURL('image/jpeg');
                }
                callback && callback(imageData);
            };
        };
        reader.readAsDataURL(file);
    },
    convertBase64UrlToBlob: function (urlData) {
        var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }
}
頁面引用:

import imageUtils from '../components/imageUtils'

mounted() {
  let self = this;
  let image = document.getElementById('image');
  this.cropper = new Cropper(image, {
      viewMode: 3,
      dragMode:'move',
      autoCropArea: 1,
      ready: function () {
          self.croppable = true;
      }
  });
},

change (e) {

    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) return;
    let file = e.target.files[0];
    let type = file.type; //文件的類型，判斷是不是圖片
    let size = file.size; //文件的大小，判斷圖片的大小
    if (this.imgCropperData.accept.indexOf(type) == -1) {
        mui.toast('請上傳JPG/JPEG/PNG格式的圖片',1500)
        return false;
    }
    if(file) {
        this.file = file;
        imageUtils.resize(file,(data)=>{
            // 這裏的this 指向reader
            this.url = data;
            this.isUpload = false;
            //每次替換圖片要從新獲得新的url
            if(this.cropper){
                this.cropper.replace(this.url);
            }
            document.getElementById("change").value ='';  //input 要清空，否則上傳同一張會有bug
        },{maxWidth:720,maxHeight:720})
    }
},

//就用這張上傳
upload: function(){
    if(!this.url){
        mui.toast('請先選擇上傳圖片!',1500);
    }else{
        this.panel = false;
        let croppedCanvas;
        if (!this.croppable) {
            return;
        }
        croppedCanvas = this.cropper.getCroppedCanvas({
            width: 460,
            height: 460,
        });
        var blob = this.convertBase64UrlToBlob(croppedCanvas.toDataURL('image/png'));
        let requestData = new FormData();
        this.bingKey = localStorage.getItem("bingKey")?localStorage.getItem("bingKey"):'';
        requestData.append('bingKey',this.bingKey);
        requestData.append('role',this.identity);
        requestData.append('year',this.year);
        requestData.append('sex',this.sex);
        requestData.append('nickName',this.nickName);
        requestData.append('imageUrl','123');
        requestData.append('resType', '1');
        requestData.append('noThumbnail', '1');
        requestData.append('file', blob,'file_20190430_'+(new Date().getTime())+'.png');
        console.log(requestData)
        this.loadShow = true;
        //this.$request.post(_basePath + '/activity/page20190430/createUserStory.html').then((data) => {
        this.$request.post(_basePath+'/activity/page20190430/createUserStory.html',requestData,{headers:{'Content-Type':'multipart/form-data'}}).then((data)=>{
            this.storyShow = true;
            this.chooseShow = false;
            this.uploadShow = false;
            this.storyId = data.storyId;
            this.storyUrl = data.storyUrl;
            this.storyImgUrl = data.photoUrl;
            this.photoUrl = data.photoUrl;
            this.context = data.context;
            this.ewmUrl =window.location.origin + document.getElementById('basePath').value + '/activity/page20190430/other.html?storyId='+data.storyId;
            var img = new Image();
            img.src = this.storyImgUrl;
            img.onload = () => {
                 this.html2Img();
            };
            this.loadShow = false;
            //註冊分享
            shareByApp('choose', {
                'title':'',
                'desc':'',
                'imgUrl': window.location.origin + _basePath + '/activity/page20190430/img/share.png',
                'link': window.location.origin + _basePath + '/activity/page20190430/other.html?storyId='+this.storyId
            });
        }).catch((res)=>{
            this.loadShow = false;
            if(res.code == 2) {
                mui.toast('穿越失敗~請上傳高清的正臉照片哦~',2000);
                return false;
            }else if(res.code == 3){
                mui.toast('你的名字含有敏感詞，請修改',2000);
                return false;
            }else if(res.code == 4){
                mui.toast('不存在角色',2000);
                return false;
            }else if(res.code == 9){
                mui.toast('人太多勒~請稍後再試',2000);
                return false;
            }
        })
   }
},

// 將base64的圖片轉換爲file文件convertBase64UrlToBlob(urlData) {    var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);    while (n--) {        u8arr[n] = bstr.charCodeAt(n);    }    return new Blob([u8arr], { type: mime });},html2Img () {    let pageWrap = document.querySelector("#saveImg");    var canvas = document.createElement("canvas");    canvas.width = 720;    canvas.height = 1134;    canvas.className="hidden";    var context = canvas.getContext("2d");    function loadImage(images, callback) {        var total = 0;        var _loaded = 0;        for (var i in images) {            total++;            images[i].p.splice(0, 0, new Image());            images[i]['p'][0].setAttribute('crossOrigin', 'anonymous');            images[i]['p'][0].src = images[i].src;            images[i]['p'][0].onload = function () {                if (++_loaded >= total) {                    callback(images);                }            };        }    };    var list = [        {            src:'./img/imgBg.png?v=1',            p:[0,0,720, 1134]        }, {            src:this.storyImgUrl,            p:[89,87,544,966]        }, {            src:'./img/ewmBg.png?v=1',            p:[0,969,720,165]        },{            src:document.querySelector(".ewmStyle").src,            p:[69,1001,85, 85]        }    ];    loadImage(list,function(images) {        for(var i=0;i<images.length;i++){            context.drawImage(images[i]['p'][0],images[i]['p'][1],images[i]['p'][2],images[i]['p'][3],images[i]['p'][4]);        }        pageWrap.appendChild(canvas);        var base64ImgSrc = canvas.toDataURL("image/png");        var img = document.createElement("img");        img.crossOrigin="anonymous";        img.className = "resultImg fixed";        img.src = base64ImgSrc;        pageWrap.appendChild(img);    });},