欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年03月06日 10:57:14   作者:東河村長  
這篇文章主要介紹了vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問題處理,需要的朋友可以參考下

一、前言

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

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

二、處理問題

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

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

  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:{//一次最多可以上傳多少張照片
    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)的問題
        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)的問題處理,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 基于Vue實(shí)現(xiàn)微前端的示例代碼

    基于Vue實(shí)現(xiàn)微前端的示例代碼

    這篇文章主要介紹了基于Vue實(shí)現(xiàn)微前端的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue高德地圖之玩轉(zhuǎn)周邊

    vue高德地圖之玩轉(zhuǎn)周邊

    vue高德地圖,帶你玩轉(zhuǎn)周邊,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • vue+element ui實(shí)現(xiàn)錨點(diǎn)定位

    vue+element ui實(shí)現(xiàn)錨點(diǎn)定位

    這篇文章主要為大家詳細(xì)介紹了vue+element ui實(shí)現(xiàn)錨點(diǎn)定位,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • Vue項(xiàng)目中使用jquery的簡(jiǎn)單方法

    Vue項(xiàng)目中使用jquery的簡(jiǎn)單方法

    這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用jquery的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • vue中解決el-date-picker更改樣式不生效問題

    vue中解決el-date-picker更改樣式不生效問題

    在使用Vue.js進(jìn)行前端開發(fā)的過程中,Element?UI?是一個(gè)非常流行的UI庫,它提供了一套完整的組件來快速搭建美觀的用戶界面,但是我們經(jīng)常遇到一個(gè)問題使用Element?UI提供的el-date-picker組件時(shí),嘗試自定義其樣式卻無法生效,所以本文給大家介紹如何解決這個(gè)問題
    2024-10-10
  • 詳解vue的diff算法原理

    詳解vue的diff算法原理

    這篇文章主要介紹了詳解vue的diff算法原理,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • 在vue中利用v-html按分號(hào)將文本換行的例子

    在vue中利用v-html按分號(hào)將文本換行的例子

    今天小編就為大家分享一篇在vue中利用v-html按分號(hào)將文本換行的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue組件之間通信方式實(shí)例總結(jié)【8種方式】

    vue組件之間通信方式實(shí)例總結(jié)【8種方式】

    這篇文章主要介紹了vue組件之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js的8種組件通信方式與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-02-02
  • 手把手搭建安裝基于windows的Vue.js運(yùn)行環(huán)境

    手把手搭建安裝基于windows的Vue.js運(yùn)行環(huán)境

    手把手教大家搭建安裝基于windows的Vue.js的運(yùn)行環(huán)境,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Vue環(huán)境搭建+VSCode+Win10的詳細(xì)教程

    Vue環(huán)境搭建+VSCode+Win10的詳細(xì)教程

    這篇文章主要介紹了Vue環(huán)境搭建+VSCode+Win10,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-08-08

最新評(píng)論