vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理

更新時(shí)間：2017年03月06日 10:57:14 作者：東河村長(zhǎng)

這篇文章主要介紹了vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理,需要的朋友可以參考下

一、前言

　　三年.net開發(fā)轉(zhuǎn)前端已經(jīng)四個(gè)月了，前端主要用webpack+vue，由于后端轉(zhuǎn)過(guò)來(lái)的，前端不夠系統(tǒng)，希望分享下開發(fā)心得與園友一起學(xué)習(xí)。

　　圖片的上傳之前都是用的插件(ajaxupload)，或者傳統(tǒng)上傳圖片的方式,各有利弊：插件的問(wèn)題是依賴jq并且會(huì)使系統(tǒng)比較臃腫，還有傳統(tǒng)的web開發(fā)模式前后端偶爾在一起及對(duì)用戶體驗(yàn)要求低，現(xiàn)在公司采用webpack+vue+restfullApi開發(fā)模式前后端完全分離，遵從高內(nèi)聚，低偶爾的原則，開發(fā)人員各司其職，一則提升開發(fā)效率（從長(zhǎng)期來(lái)看，短期對(duì)于很多開發(fā)人員需要有個(gè)適應(yīng)的過(guò)程，特別是初中級(jí)的前端處理業(yè)務(wù)邏輯方面的能力比較欠缺），二則提升用戶體驗(yàn)。今天分享下在項(xiàng)目開發(fā)中寫的的圖片上傳 vue組件。

二、處理問(wèn)題

　　這里用h5做圖片上傳考慮到瀏覽器支持的問(wèn)題，這里考慮的場(chǎng)景是在做webapp的時(shí)候

　　1.移動(dòng)web圖片上傳還包括拍攝上傳，但是在移動(dòng)端會(huì)出現(xiàn)拍攝的照片會(huì)旋轉(zhuǎn)，處理這個(gè)問(wèn)題需要得到圖片旋轉(zhuǎn)的情況，可以用exif.js來(lái)獲取，具體可以參看文檔

　　2.圖片壓縮

　　3.旋轉(zhuǎn)

三、代碼

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:{//一次最多可以上傳多少?gòu)堈掌?
    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 = [];//圖片數(shù)據(jù)清零
    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;
        //修復(fù)ios上傳圖片的時(shí)候 被旋轉(zhuǎn)的問(wèn)題
        if(Orientation != "" && Orientation != 1){
         switch(Orientation){
          case 6://需要順時(shí)針（向左）90度旋轉(zhuǎn)
           _this.rotateImg(this,'left',canvas);
           break;
          case 8://需要逆時(shí)針（向右）90度旋轉(zhuǎn)
           _this.rotateImg(this,'right',canvas);
           break;
          case 3://需要180度旋轉(zhuǎn)
           _this.rotateImg(this,'right',canvas);//轉(zhuǎn)兩次
           _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) {//圖片旋轉(zhuǎn)
    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>

以上所述是小編給大家介紹的vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: