vuejs開發組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理

1、前言

　　三年.net開發轉前端已經四個月了，前端主要用webpack+vue，因爲後端轉過來的，前端不夠系統，但願分享下開發心得與園友一塊兒學習。

　　圖片的上傳以前都是用的插件(ajaxupload)，或者傳統上傳圖片的方式,各有利弊：插件的問題是依賴jq而且會使系統比較臃腫，還有傳統的web開發模式 先後端偶爾在一塊兒及對用戶體驗要求低，如今公司採用webpack+vue+restfullApi開發模式 先後端徹底分離，聽從高內聚，低偶爾的原則，開發人員各司其職，一則提高開發效率（從長期來看，短時間對於不少開發人員須要有個適應的過程，特別是初中級的前端處理業務邏輯方面的能力比較欠缺），二則提高用戶體驗。今天分享下在項目開發中寫的的圖片上傳 vue組件。

2、處理問題

　　這裏用h5作圖片上傳考慮到瀏覽器支持的問題，這裏考慮的場景是在作webapp的時候

　　1.移動web圖片上傳還包括拍攝上傳，可是在移動端會出現拍攝的照片會旋轉，處理這個問題須要獲得圖片旋轉的狀況，能夠用exif.js來獲取，具體能夠參看文檔

　　2.圖片壓縮

　　3.旋轉

3、代碼

1組件代碼

<template>
    <div>
        <input type="file" style="display: none;" id="img-upload" multiple accept="image/*" @change="uploadImg($event)"/>
    </div>
</template>
<script>
    import EXIF from '../../../Resource/Global/Js/exif'
    export default{
        name:"image-html5-upload",
        props:{
            imgArr:{
                type:Array,
                twoWay: true,
                default:Array
            },
            imgNumLimit:{//一次最多能夠上傳多少張照片
                type:Number,
                default:4
            }
        },
        methods:{
            "uploadImg": function(e){
                let tag = e.target;
                let fileList = tag.files;
                let imgNum = fileList.length;
                let _this = this;
                _this.imgArr = [];//圖片數據清零
                if(this.imgArr.length + imgNum > this.imgNumLimit){
                    alert('一次最多上傳'+this.imgNumLimit+'張圖片！');
                    return;
                }
                var Orientation;
                for(let i=0;i<imgNum;i++){
                    EXIF.getData(fileList[i], function(){
                        Orientation = EXIF.getTag(fileList[i], 'Orientation');
                    });
                    let reader = new FileReader();
                    reader.readAsDataURL(fileList[i]);
                    reader.onload = function(){
                        var oReader = new FileReader();
                        oReader.onload = function(e) {
                            var image = new Image();
                            image.src = e.target.result;
                            image.onload = function() {
                                var expectWidth = this.naturalWidth;
                                var expectHeight = this.naturalHeight;
                                if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
                                    expectWidth = 800;
                                    expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
                                } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
                                    expectHeight = 1200;
                                    expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
                                }
                                var canvas = document.createElement("canvas");
                                var ctx = canvas.getContext("2d");
                                canvas.width = expectWidth;
                                canvas.height = expectHeight;
                                ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
                                var base64 = null;
                                //修復ios上傳圖片的時候 被旋轉的問題
                                if(Orientation != "" && Orientation != 1){
                                    switch(Orientation){
                                        case 6://須要順時針（向左）90度旋轉
                                            _this.rotateImg(this,'left',canvas);
                                            break;
                                        case 8://須要逆時針（向右）90度旋轉
                                            _this.rotateImg(this,'right',canvas);
                                            break;
                                        case 3://須要180度旋轉
                                            _this.rotateImg(this,'right',canvas);//轉兩次
                                            _this.rotateImg(this,'right',canvas);
                                            break;
                                    }
                                }
                                base64 = canvas.toDataURL("image/jpeg", 0.8);
                                if(fileList[i].size / 1024000 > 1){
                                    _this.imgScale(base64, 4)
                                }else{
                                    _this.imgArr.push({"src": base64});
                                }
                                console.log(JSON.stringify(_this.imgArr));
                            };
                        };
                        oReader.readAsDataURL(fileList[i]);
                    }
                }
            },
            "imgScale": function(imgUrl,quality){
                let img = new Image();
                let _this = this;
                let canvas = document.createElement('canvas');
                let cxt = canvas.getContext('2d');
                img.src = imgUrl;
                img.onload = function(){
                    //縮放後圖片的寬高
                    let width = img.naturalWidth/quality;
                    let height = img.naturalHeight/quality;
                    canvas.width = width;
                    canvas.height = height;
                    cxt.drawImage(this, 0, 0, width, height);
                    _this.imgArr.push({"src": canvas.toDataURL('image/jpeg')});
                }
            },
            "rotateImg":function (img, direction,canvas) {//圖片旋轉
                var min_step = 0;
                var max_step = 3;
                if (img == null)return;
                var height = img.height;
                var width = img.width;
                var step = 2;
                if (step == null) {
                    step = min_step;
                }
                if (direction == 'right') {
                    step++;
                    step > max_step && (step = min_step);
                } else {
                    step--;
                    step < min_step && (step = max_step);
                }
                var degree = step * 90 * Math.PI / 180;
                var ctx = canvas.getContext('2d');
                switch (step) {
                    case 0:
                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0);
                        break;
                    case 1:
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(degree);
                        ctx.drawImage(img, 0, -height);
                        break;
                    case 2:
                        canvas.width = width;
                        canvas.height = height;
                        ctx.rotate(degree);
                        ctx.drawImage(img, -width, -height);
                        break;
                    case 3:
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(degree);
                        ctx.drawImage(img, -width, 0);
                        break;
                }
            }
        }
    }
</script>

2.使用方法

<template>
    <div>
        <div class="album-img-list">
            <ul>
                <li v-for="img in imgList"><div class="album-bg-img"><img  :src='img.src'> </div></li>

            </ul>
        </div>
        <div class="album">
            <label for="img-upload">上傳照片</label>
                <image-html5-upload :img-arr.sync="imgList"></image-html5-upload>
        </div>
    </div>
</template>

 

本文版權歸做者（謝俊）和博客園全部，歡迎轉載，轉載請標明出處。

原文地址：http://www.cnblogs.com/net-xiejun/

微信開發羣

完整源碼下載：https://github.com/xiejun-net/weixin

公衆帳號：