濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > H5調(diào)用相機(jī)拍照并壓縮圖片的實(shí)例代碼

H5調(diào)用相機(jī)拍照并壓縮圖片的實(shí)例代碼

熱門標(biāo)簽:貸款電銷人工和機(jī)器人哪個(gè)好 飛亞外呼系統(tǒng) 電話機(jī)器人如何 杭州營(yíng)銷電銷機(jī)器人供應(yīng)商 聯(lián)通400電話申請(qǐng) 高德地圖標(biāo)注賓館位置 西寧智能外呼系統(tǒng)加盟 百應(yīng)電銷機(jī)器人產(chǎn)業(yè) 電視購(gòu)物電銷外呼系統(tǒng)

整理文檔,搜刮出一個(gè)H5調(diào)用相機(jī)拍照并壓縮圖片的實(shí)例代碼,稍微整理精簡(jiǎn)一下做下分享。

背景

最近要做一個(gè)h5的頁(yè)面,主要功能就是調(diào)用相機(jī)拍照或者是相冊(cè)選圖并且把照片壓縮轉(zhuǎn)base64之后上傳到后臺(tái)服務(wù)器,然后服務(wù)器返回識(shí)別結(jié)果。

前端的主要功能點(diǎn)有:

  1. H5如何調(diào)用相機(jī)
  2. 圖片如何壓縮
  3. 圖片轉(zhuǎn)base64

H5調(diào)用相機(jī)/相冊(cè)

調(diào)用相機(jī)最簡(jiǎn)單的方法就是使用input file[camera]屬性:

<input type="file" capture=camera accept="image/*">//相機(jī)
<input type="file" accept="image/*">//相冊(cè)

這個(gè)種方法兼容性還是有問題的,在iphone手機(jī)上可以正常打開相機(jī),但是在安卓手機(jī)上點(diǎn)擊之后是相機(jī)、圖庫(kù)、文件管理器等混合選擇項(xiàng)。在網(wǎng)上搜了很多都沒有什么好的解決辦法,只能繼續(xù)往下寫了。。。

圖片壓縮

圖片壓縮就要用到FileReader<canvas>了。

FileReader對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在計(jì)算機(jī)上的文件的內(nèi)容,使用File或Blob對(duì)象指定要讀取的文件或數(shù)據(jù)。

<canvas>是一個(gè)可以使用腳本在其中繪制圖形的HTML元素,可以繪制圖形和簡(jiǎn)單的動(dòng)畫。

圖片壓縮要壓縮圖片的分辨率和質(zhì)量,分辨率壓縮我這里是設(shè)置了圖片的最大邊為800,另一邊按照?qǐng)D片原有比例縮放,也可以設(shè)置圖片整體的縮放比例。

var MAX_WH=800;
var image=new Image();
image.onload=function () {
  if(image.height > MAX_WH) {
    // 寬度等比例縮放 *= 
    image.width *= MAX_WH/ image.height;
    image.height = MAX_WH;
  }
  if(image.width > MAX_WH) {
    // 寬度等比例縮放 *= 
    image.height *= MAX_WH/ image.width;
    image.width = MAX_WH;
  }
}
image.src=dataURL;//dataURL通過FileReader獲取

然后就是壓縮圖片的質(zhì)量了,這里設(shè)置壓縮了80%,如果設(shè)置太小圖片就失真了。動(dòng)態(tài)創(chuàng)建<canvas>標(biāo)簽然后壓縮圖片:

var quality=80;
var cvs = document.createElement('canvas');
cvs.width = image.width;
cvs.heigh = image.height;
var context=cvs.getContext("2d");
context.drawImage(image, 0, 0,image.width, image.height);
dataURL = cvs.toDataURL('image/jpeg', quality/100);

然后就是上傳到服務(wù)器并展示服務(wù)器的結(jié)果啦,然而事情并沒有那么順利。。。ios手機(jī)拍照壓縮之后圖片莫名的旋轉(zhuǎn)了,繼續(xù)解決問題。

解決IOS圖片旋轉(zhuǎn)

首先引用exif.js,通過EXIF.getData和EXIF.getTag獲取拍照方向信息。

//file通過input標(biāo)簽獲取
EXIF.getData(file,function(){
  orientation=EXIF.getTag(file,'Orientation');
});

下面給出每個(gè)orientation值對(duì)應(yīng)到iphone手機(jī)拍照的含義:

orientation 描述
3 iphone橫屏拍攝,此時(shí)home鍵在左側(cè),圖片相對(duì)于原始位置旋轉(zhuǎn)了180度
6 iphone豎屏拍攝,此時(shí)home鍵在下方(正常拿手機(jī)的方向),圖片相對(duì)于原始位置逆時(shí)針旋轉(zhuǎn)可90度
8 iphone豎屏拍攝,此時(shí)home鍵在上方,圖片相對(duì)于原始位置順時(shí)針旋轉(zhuǎn)了90度
獲取圖片的方向信息之后,根據(jù)獲取到的值作相應(yīng)的旋轉(zhuǎn)操作。
switch (orientation) {
  case 6:
  case 8:
    cvs.width = height;
    cvs.height = width;
    break;
}
var context=cvs.getContext("2d");
switch(orientation){
  //iphone橫屏拍攝,此時(shí)home鍵在左側(cè)
  case 3:
  // 180度向左旋轉(zhuǎn)
  context.translate(width, height);
  context.rotate(Math.PI);
  break;
  //iphone豎屏拍攝,此時(shí)home鍵在下方(正常拿手機(jī)的方向)
  case 6:
  context.rotate(0.5 * Math.PI);
  context.translate(0, -height);
  break;
  //iphone豎屏拍攝,此時(shí)home鍵在上方
  case 8:
  // 逆時(shí)針旋轉(zhuǎn)90度
  context.rotate(-0.5 * Math.PI);
  context.translate(-width, 0);
  break;
}

然后再上傳圖片,發(fā)現(xiàn)在IOS下圖片已經(jīng)正常了。

下面給出完整代碼:

$('input[type=file]').change(function(e) {
  var file = this.files[0];
  var mime_type=file.type;
  var orientation=0;
  if (file && /^image\//i.test(file.type)) {
    EXIF.getData(file,function(){
      orientation=EXIF.getTag(file,'Orientation');
    });

    var reader = new FileReader();
    reader.onloadend = function () {
      var width,height;
      var MAX_WH=800;
      var image=new Image();
      image.onload=function () {
        if(image.height > MAX_WH) {
          // 寬度等比例縮放 *= 
          image.width *= MAX_WH / image.height;
          image.height = MAX_WH;
        }
        if(image.width > MAX_WH) {
          // 寬度等比例縮放 *= 
          image.height *= MAX_WH / image.width;
          image.width = MAX_WH;
        }
        //壓縮
        var quality=80;
        var cvs = document.createElement('canvas');
        cvs.width = width = image.width;
        cvs.height =height = image.height;

        switch (orientation) {
          case 6:
          case 8:
            cvs.width = height;
            cvs.height = width;
            break;
        }

        var context=cvs.getContext("2d");

        //解決ios圖片旋轉(zhuǎn)問題 
        switch(orientation){
          //iphone橫屏拍攝,此時(shí)home鍵在左側(cè)
          case 3:
          // 180度向左旋轉(zhuǎn)
          context.translate(width, height);
          context.rotate(Math.PI);
          break;
          //iphone豎屏拍攝,此時(shí)home鍵在下方(正常拿手機(jī)的方向)
          case 6:
          context.rotate(0.5 * Math.PI);
          context.translate(0, -height);
          break;
          //iphone豎屏拍攝,此時(shí)home鍵在上方
          case 8:
          // 逆時(shí)針旋轉(zhuǎn)90度
          context.rotate(-0.5 * Math.PI);
          context.translate(-width, 0);
          break;
        }
        context.drawImage(image, 0, 0,image.width, image.height);
        dataURL = cvs.toDataURL('image/jpeg', quality/100);
        //獲取識(shí)別結(jié)果
        ...
      }
      image.src=dataURL;
    };
    reader.readAsDataURL(file);
  }else{
    alert("只能識(shí)別圖片!")
  }
});

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:玉溪 安慶 邯鄲 內(nèi)蒙古 撫州 牡丹江 煙臺(tái) 晉中

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《H5調(diào)用相機(jī)拍照并壓縮圖片的實(shí)例代碼》,本文關(guān)鍵詞  調(diào)用,相機(jī),拍照,并,壓縮,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《H5調(diào)用相機(jī)拍照并壓縮圖片的實(shí)例代碼》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于H5調(diào)用相機(jī)拍照并壓縮圖片的實(shí)例代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章

    上一篇:HTML5新特性之語(yǔ)義化標(biāo)簽

    下一篇:基于HTML5實(shí)現(xiàn)類似微信手機(jī)搖一搖功能(計(jì)算搖動(dòng)次數(shù))

    马龙县| 临猗县| 凉山| 大安市| 余江县| 湘潭市| 蒲城县| 新龙县| 石首市| 大同市| 工布江达县| 眉山市| 抚松县| 兴仁县| 东乡族自治县| 罗山县| 宜川县| 城步| 抚远县| 乌拉特前旗| 伊吾县| 车险| 东丽区| 故城县| 庆阳市| 思南县| 陇西县| 铜梁县| 阳谷县| 晋中市| 边坝县| 中方县| 迁安市| 彭州市| 博野县| 拉萨市| 甘南县| 武宣县| 麻江县| 昌都县| 班戈县|