社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 如何使用Vue2.0調用相機進行拍照

如何使用Vue2.0調用相機進行拍照

php中世界最好的语言
php中世界最好的语言
Jun 01, 2018 pm 05:27 PM
網路攝影機 呼叫

這次為大家帶來如何使用Vue2.0調用攝影機進行拍照，使用Vue2.0調用攝影機進行拍照的注意事項有哪些，下面就是實戰案例，一起來看一下。 

<template>
 <p>
  <p style="padding:20px;">
   <p class="show">
    <p class="picture" :style="&#39;backgroundImage:url(&#39;+headerImage+&#39;)&#39;"></p>
   </p>
   <p style="margin-top:20px;">
    <input type="file" id="upload" accept="image/jpg" @change="upload">
    <label for="upload"></label>
   </p>
  </p>
 </p>
</template>
<script>
import {Exif} from './exif.js'
export default {
 data () {
  return {
   headerImage:'',picValue:''
  }
 },
 mounted () {
 },
 methods: {
  upload (e) {
   let files = e.target.files || e.dataTransfer.files;
   if (!files.length) return;
   this.picValue = files[0];
   this.imgPreview(this.picValue);
   console.log(this.picValue)
  },
  imgPreview (file) {
   let self = this;
   let Orientation;
   //去获取拍照时的信息，解决拍出来的照片旋转问题
    Exif.getData(file, function(){
      Orientation = Exif.getTag(this, 'Orientation');
    });
   // 看支持不支持FileReader 
   if (!file || !window.FileReader) return;
   if (/^image/.test(file.type)) {
     // 创建一个reader
     let reader = new FileReader();
     // 将图片2将转成 base64 格式
     reader.readAsDataURL(file);
     // 读取成功后的回调
     reader.onloadend = function () {
      let result = this.result;
      let img = new Image();
      img.src = result;
      //判断图片是否大于100K,是就直接上传，反之压缩图片
      if (this.result.length <= (100 * 1024)) {
       self.headerImage = this.result;
       self.postImg();
      }else {
       img.onload = function () {
        let data = self.compress(img,Orientation);
        self.headerImage = data;
        self.postImg();
       }
      }
     }
    }
   },
   postImg () {
    //这里写接口
   },
   rotateImg (img, direction,canvas) {
    //最小与最大旋转方向，图片旋转4次后回到原方向
    const min_step = 0;
    const max_step = 3;
    if (img == null)return;
    //img的高度和宽度不能在img元素隐藏后获取，否则会出错
    let height = img.height;
    let width = img.width;
    let step = 2;
    if (step == null) {
      step = min_step;
    }
    if (direction == &#39;right&#39;) {
      step++;
      //旋转到原位置，即超过最大值
      step > max_step && (step = min_step);
    } else {
      step--;
      step < min_step && (step = max_step);
    }
    //旋转角度以弧度值为参数
    let degree = step * 90 * Math.PI / 180;
    let ctx = canvas.getContext(&#39;2d&#39;);
    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;
    }
  },
  compress(img,Orientation) {
   let canvas = document.createElement("canvas");
   let ctx = canvas.getContext(&#39;2d&#39;);
    //瓦片canvas
   let tCanvas = document.createElement("canvas");
   let tctx = tCanvas.getContext("2d");
   let initSize = img.src.length;
   let width = img.width;
   let height = img.height;
   //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
   let ratio;
   if ((ratio = width * height / 4000000) > 1) {
    console.log("大于400万像素")
    ratio = Math.sqrt(ratio);
    width /= ratio;
    height /= ratio;
   } else {
    ratio = 1;
   }
   canvas.width = width;
   canvas.height = height;
 //    铺底色
   ctx.fillStyle = "#fff";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   //如果图片像素大于100万则使用瓦片绘制
   let count;
   if ((count = width * height / 1000000) > 1) {
    console.log("超过100W像素");
    count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
 //      计算每块瓦片的宽和高
    let nw = ~~(width / count);
    let nh = ~~(height / count);
    tCanvas.width = nw;
    tCanvas.height = nh;
    for (let i = 0; i < count; i++) {
     for (let j = 0; j < count; j++) {
      tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
      ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
     }
    }
   } else {
    ctx.drawImage(img, 0, 0, width, height);
   }
   //修复ios上传图片的时候 被旋转的问题
   if(Orientation != "" && Orientation != 1){
    switch(Orientation){
     case 6://需要顺时针（向左）90度旋转
       this.rotateImg(img,&#39;left&#39;,canvas);
       break;
     case 8://需要逆时针（向右）90度旋转
       this.rotateImg(img,&#39;right&#39;,canvas);
       break;
     case 3://需要180度旋转
       this.rotateImg(img,&#39;right&#39;,canvas);//转两次
       this.rotateImg(img,&#39;right&#39;,canvas);
       break;
    }
   }
   //进行最小压缩
   let ndata = canvas.toDataURL(&#39;image/jpeg&#39;, 0.1);
   console.log(&#39;压缩前：&#39; + initSize);
   console.log(&#39;压缩后：&#39; + ndata.length);
   console.log(&#39;压缩率：&#39; + ~~(100 * (initSize - ndata.length) / initSize) + "%");
   tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
   return ndata;
  },
 }
}
</script>
<style>
*{
 margin: 0;
 padding: 0;
}
.show {
 width: 100px;
 height: 100px;
 overflow: hidden;
 position: relative;
 border-radius: 50%;
 border: 1px solid #d5d5d5;
}
.picture {
 width: 100%;
 height: 100%;
 overflow: hidden;
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}
</style>
登入後複製

引用的exif.js程式碼

(function() {
  var debug = false;
  var root = this;
  var EXIF = function(obj) {
    if (obj instanceof EXIF) return obj;
    if (!(this instanceof EXIF)) return new EXIF(obj);
    this.EXIFwrapped = obj;
  };
  if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
      exports = module.exports = EXIF;
    }
    exports.EXIF = EXIF;
  } else {
    root.EXIF = EXIF;
  }
  var ExifTags = EXIF.Tags = {
    // version tags
    0x9000 : "ExifVersion",       // EXIF version
    0xA000 : "FlashpixVersion",     // Flashpix format version
    // colorspace tags
    0xA001 : "ColorSpace",       // Color space information tag
    // image configuration
    0xA002 : "PixelXDimension",     // Valid width of meaningful image
    0xA003 : "PixelYDimension",     // Valid height of meaningful image
    0x9101 : "ComponentsConfiguration", // Information about channels
    0x9102 : "CompressedBitsPerPixel", // Compressed bits per pixel
    // user information
    0x927C : "MakerNote",        // Any desired information written by the manufacturer
    0x9286 : "UserComment",       // Comments by user
    // related file
    0xA004 : "RelatedSoundFile",    // Name of related sound file
    // date and time
    0x9003 : "DateTimeOriginal",    // Date and time when the original image was generated
    0x9004 : "DateTimeDigitized",    // Date and time when the image was stored digitally
    0x9290 : "SubsecTime",       // Fractions of seconds for DateTime
    0x9291 : "SubsecTimeOriginal",   // Fractions of seconds for DateTimeOriginal
    0x9292 : "SubsecTimeDigitized",   // Fractions of seconds for DateTimeDigitized
    // picture-taking conditions
    0x829A : "ExposureTime",      // Exposure time (in seconds)
    0x829D : "FNumber",         // F number
    0x8822 : "ExposureProgram",     // Exposure program
    0x8824 : "SpectralSensitivity",   // Spectral sensitivity
    0x8827 : "ISOSpeedRatings",     // ISO speed rating
    0x8828 : "OECF",          // Optoelectric conversion factor
    0x9201 : "ShutterSpeedValue",    // Shutter speed
    0x9202 : "ApertureValue",      // Lens aperture
    0x9203 : "BrightnessValue",     // Value of brightness
    0x9204 : "ExposureBias",      // Exposure bias
    0x9205 : "MaxApertureValue",    // Smallest F number of lens
    0x9206 : "SubjectDistance",     // Distance to subject in meters
    0x9207 : "MeteringMode",      // Metering mode
    0x9208 : "LightSource",       // Kind of light source
    0x9209 : "Flash",          // Flash status
    0x9214 : "SubjectArea",       // Location and area of main subject
    0x920A : "FocalLength",       // Focal length of the lens in mm
    0xA20B : "FlashEnergy",       // Strobe energy in BCPS
    0xA20C : "SpatialFrequencyResponse",  //
    0xA20E : "FocalPlaneXResolution",  // Number of pixels in width direction per FocalPlaneResolutionUnit
    0xA20F : "FocalPlaneYResolution",  // Number of pixels in height direction per FocalPlaneResolutionUnit
    0xA210 : "FocalPlaneResolutionUnit",  // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution
    0xA214 : "SubjectLocation",     // Location of subject in image
    0xA215 : "ExposureIndex",      // Exposure index selected on camera
    0xA217 : "SensingMethod",      // Image sensor type
    0xA300 : "FileSource",       // Image source (3 == DSC)
    0xA301 : "SceneType",        // Scene type (1 == directly photographed)
    0xA302 : "CFAPattern",       // Color filter array geometric pattern
    0xA401 : "CustomRendered",     // Special processing
    0xA402 : "ExposureMode",      // Exposure mode
    0xA403 : "WhiteBalance",      // 1 = auto white balance, 2 = manual
    0xA404 : "DigitalZoomRation",    // Digital zoom ratio
    0xA405 : "FocalLengthIn35mmFilm",  // Equivalent foacl length assuming 35mm film camera (in mm)
    0xA406 : "SceneCaptureType",    // Type of scene
    0xA407 : "GainControl",       // Degree of overall image gain adjustment
    0xA408 : "Contrast",        // Direction of contrast processing applied by camera
    0xA409 : "Saturation",       // Direction of saturation processing applied by camera
    0xA40A : "Sharpness",        // Direction of sharpness processing applied by camera
    0xA40B : "DeviceSettingDescription",  //
    0xA40C : "SubjectDistanceRange",  // Distance to subject
    // other tags
    0xA005 : "InteroperabilityIFDPointer",
    0xA420 : "ImageUniqueID"      // Identifier assigned uniquely to each image
  };
  var TiffTags = EXIF.TiffTags = {
    0x0100 : "ImageWidth",
    0x0101 : "ImageHeight",
    0x8769 : "ExifIFDPointer",
    0x8825 : "GPSInfoIFDPointer",
    0xA005 : "InteroperabilityIFDPointer",
    0x0102 : "BitsPerSample",
    0x0103 : "Compression",
    0x0106 : "PhotometricInterpretation",
    0x0112 : "Orientation",
    0x0115 : "SamplesPerPixel",
    0x011C : "PlanarConfiguration",
    0x0212 : "YCbCrSubSampling",
    0x0213 : "YCbCrPositioning",
    0x011A : "XResolution",
    0x011B : "YResolution",
    0x0128 : "ResolutionUnit",
    0x0111 : "StripOffsets",
    0x0116 : "RowsPerStrip",
    0x0117 : "StripByteCounts",
    0x0201 : "JPEGInterchangeFormat",
    0x0202 : "JPEGInterchangeFormatLength",
    0x012D : "TransferFunction",
    0x013E : "WhitePoint",
    0x013F : "PrimaryChromaticities",
    0x0211 : "YCbCrCoefficients",
    0x0214 : "ReferenceBlackWhite",
    0x0132 : "DateTime",
    0x010E : "ImageDescription",
    0x010F : "Make",
    0x0110 : "Model",
    0x0131 : "Software",
    0x013B : "Artist",
    0x8298 : "Copyright"
  };
  var GPSTags = EXIF.GPSTags = {
    0x0000 : "GPSVersionID",
    0x0001 : "GPSLatitudeRef",
    0x0002 : "GPSLatitude",
    0x0003 : "GPSLongitudeRef",
    0x0004 : "GPSLongitude",
    0x0005 : "GPSAltitudeRef",
    0x0006 : "GPSAltitude",
    0x0007 : "GPSTimeStamp",
    0x0008 : "GPSSatellites",
    0x0009 : "GPSStatus",
    0x000A : "GPSMeasureMode",
    0x000B : "GPSDOP",
    0x000C : "GPSSpeedRef",
    0x000D : "GPSSpeed",
    0x000E : "GPSTrackRef",
    0x000F : "GPSTrack",
    0x0010 : "GPSImgDirectionRef",
    0x0011 : "GPSImgDirection",
    0x0012 : "GPSMapDatum",
    0x0013 : "GPSDestLatitudeRef",
    0x0014 : "GPSDestLatitude",
    0x0015 : "GPSDestLongitudeRef",
    0x0016 : "GPSDestLongitude",
    0x0017 : "GPSDestBearingRef",
    0x0018 : "GPSDestBearing",
    0x0019 : "GPSDestDistanceRef",
    0x001A : "GPSDestDistance",
    0x001B : "GPSProcessingMethod",
    0x001C : "GPSAreaInformation",
    0x001D : "GPSDateStamp",
    0x001E : "GPSDifferential"
  };
  var StringValues = EXIF.StringValues = {
    ExposureProgram : {
      0 : "Not defined",
      1 : "Manual",
      2 : "Normal program",
      3 : "Aperture priority",
      4 : "Shutter priority",
      5 : "Creative program",
      6 : "Action program",
      7 : "Portrait mode",
      8 : "Landscape mode"
    },
    MeteringMode : {
      0 : "Unknown",
      1 : "Average",
      2 : "CenterWeightedAverage",
      3 : "Spot",
      4 : "MultiSpot",
      5 : "Pattern",
      6 : "Partial",
      255 : "Other"
    },
    LightSource : {
      0 : "Unknown",
      1 : "Daylight",
      2 : "Fluorescent",
      3 : "Tungsten (incandescent light)",
      4 : "Flash",
      9 : "Fine weather",
      10 : "Cloudy weather",
      11 : "Shade",
      12 : "Daylight fluorescent (D 5700 - 7100K)",
      13 : "Day white fluorescent (N 4600 - 5400K)",
      14 : "Cool white fluorescent (W 3900 - 4500K)",
      15 : "White fluorescent (WW 3200 - 3700K)",
      17 : "Standard light A",
      18 : "Standard light B",
      19 : "Standard light C",
      20 : "D55",
      21 : "D65",
      22 : "D75",
      23 : "D50",
      24 : "ISO studio tungsten",
      255 : "Other"
    },
    Flash : {
      0x0000 : "Flash did not fire",
      0x0001 : "Flash fired",
      0x0005 : "Strobe return light not detected",
      0x0007 : "Strobe return light detected",
      0x0009 : "Flash fired, compulsory flash mode",
      0x000D : "Flash fired, compulsory flash mode, return light not detected",
      0x000F : "Flash fired, compulsory flash mode, return light detected",
      0x0010 : "Flash did not fire, compulsory flash mode",
      0x0018 : "Flash did not fire, auto mode",
      0x0019 : "Flash fired, auto mode",
      0x001D : "Flash fired, auto mode, return light not detected",
      0x001F : "Flash fired, auto mode, return light detected",
      0x0020 : "No flash function",
      0x0041 : "Flash fired, red-eye reduction mode",
      0x0045 : "Flash fired, red-eye reduction mode, return light not detected",
      0x0047 : "Flash fired, red-eye reduction mode, return light detected",
      0x0049 : "Flash fired, compulsory flash mode, red-eye reduction mode",
      0x004D : "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",
      0x004F : "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",
      0x0059 : "Flash fired, auto mode, red-eye reduction mode",
      0x005D : "Flash fired, auto mode, return light not detected, red-eye reduction mode",
      0x005F : "Flash fired, auto mode, return light detected, red-eye reduction mode"
    },
    SensingMethod : {
      1 : "Not defined",
      2 : "One-chip color area sensor",
      3 : "Two-chip color area sensor",
      4 : "Three-chip color area sensor",
      5 : "Color sequential area sensor",
      7 : "Trilinear sensor",
      8 : "Color sequential linear sensor"
    },
    SceneCaptureType : {
      0 : "Standard",
      1 : "Landscape",
      2 : "Portrait",
      3 : "Night scene"
    },
    SceneType : {
      1 : "Directly photographed"
    },
    CustomRendered : {
      0 : "Normal process",
      1 : "Custom process"
    },
    WhiteBalance : {
      0 : "Auto white balance",
      1 : "Manual white balance"
    },
    GainControl : {
      0 : "None",
      1 : "Low gain up",
      2 : "High gain up",
      3 : "Low gain down",
      4 : "High gain down"
    },
    Contrast : {
      0 : "Normal",
      1 : "Soft",
      2 : "Hard"
    },
    Saturation : {
      0 : "Normal",
      1 : "Low saturation",
      2 : "High saturation"
    },
    Sharpness : {
      0 : "Normal",
      1 : "Soft",
      2 : "Hard"
    },
    SubjectDistanceRange : {
      0 : "Unknown",
      1 : "Macro",
      2 : "Close view",
      3 : "Distant view"
    },
    FileSource : {
      3 : "DSC"
    },
    Components : {
      0 : "",
      1 : "Y",
      2 : "Cb",
      3 : "Cr",
      4 : "R",
      5 : "G",
      6 : "B"
    }
  };
  function addEvent(element, event, handler) {
    if (element.addEventListener) {
      element.addEventListener(event, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + event, handler);
    }
  }
  function imageHasData(img) {
    return !!(img.exifdata);
  }
  function base64ToArrayBuffer(base64, contentType) {
    contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg'
    base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
    var binary = atob(base64);
    var len = binary.length;
    var buffer = new ArrayBuffer(len);
    var view = new Uint8Array(buffer);
    for (var i = 0; i < len; i++) {
      view[i] = binary.charCodeAt(i);
    }
    return buffer;
  }
  function objectURLToBlob(url, callback) {
    var http = new XMLHttpRequest();
    http.open("GET", url, true);
    http.responseType = "blob";
    http.onload = function(e) {
      if (this.status == 200 || this.status === 0) {
        callback(this.response);
      }
    };
    http.send();
  }
  function getImageData(img, callback) {
    function handleBinaryFile(binFile) {
      var data = findEXIFinJPEG(binFile);
      var iptcdata = findIPTCinJPEG(binFile);
      img.exifdata = data || {};
      img.iptcdata = iptcdata || {};
      if (callback) {
        callback.call(img);
      }
    }
    if (img.src) {
      if (/^data\:/i.test(img.src)) { // Data URI
        var arrayBuffer = base64ToArrayBuffer(img.src);
        handleBinaryFile(arrayBuffer);
      } else if (/^blob\:/i.test(img.src)) { // Object URL
        var fileReader = new FileReader();
        fileReader.onload = function(e) {
          handleBinaryFile(e.target.result);
        };
        objectURLToBlob(img.src, function (blob) {
          fileReader.readAsArrayBuffer(blob);
        });
      } else {
        var http = new XMLHttpRequest();
        http.onload = function() {
          if (this.status == 200 || this.status === 0) {
            handleBinaryFile(http.response);
          } else {
            throw "Could not load image";
          }
          http = null;
        };
        http.open("GET", img.src, true);
        http.responseType = "arraybuffer";
        http.send(null);
      }
    } else if (window.FileReader && (img instanceof window.Blob || img instanceof window.File)) {
      var fileReader = new FileReader();
      fileReader.onload = function(e) {
        if (debug) console.log("Got file of length " + e.target.result.byteLength);
        handleBinaryFile(e.target.result);
      };
      fileReader.readAsArrayBuffer(img);
    }
  }
  function findEXIFinJPEG(file) {
    var dataView = new DataView(file);
    if (debug) console.log("Got file of length " + file.byteLength);
    if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {
      if (debug) console.log("Not a valid JPEG");
      return false; // not a valid jpeg
    }
    var offset = 2,
      length = file.byteLength,
      marker;
    while (offset < length) {
      if (dataView.getUint8(offset) != 0xFF) {
        if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset));
        return false; // not a valid marker, something is wrong
      }
      marker = dataView.getUint8(offset + 1);
      if (debug) console.log(marker);
      // we could implement handling for other markers here,
      // but we&#39;re only looking for 0xFFE1 for EXIF data
      if (marker == 225) {
        if (debug) console.log("Found 0xFFE1 marker");
        return readEXIFData(dataView, offset + 4, dataView.getUint16(offset + 2) - 2);
        // offset += 2 + file.getShortAt(offset+2, true);
      } else {
        offset += 2 + dataView.getUint16(offset+2);
      }
    }
  }
  function findIPTCinJPEG(file) {
    var dataView = new DataView(file);
    if (debug) console.log("Got file of length " + file.byteLength);
    if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {
      if (debug) console.log("Not a valid JPEG");
      return false; // not a valid jpeg
    }
    var offset = 2,
      length = file.byteLength;
    var isFieldSegmentStart = function(dataView, offset){
      return (
        dataView.getUint8(offset) === 0x38 &&
        dataView.getUint8(offset+1) === 0x42 &&
        dataView.getUint8(offset+2) === 0x49 &&
        dataView.getUint8(offset+3) === 0x4D &&
        dataView.getUint8(offset+4) === 0x04 &&
        dataView.getUint8(offset+5) === 0x04
      );
    };
    while (offset < length) {
      if ( isFieldSegmentStart(dataView, offset )){
        // Get the length of the name header (which is padded to an even number of bytes)
        var nameHeaderLength = dataView.getUint8(offset+7);
        if(nameHeaderLength % 2 !== 0) nameHeaderLength += 1;
        // Check for pre photoshop 6 format
        if(nameHeaderLength === 0) {
          // Always 4
          nameHeaderLength = 4;
        }
        var startOffset = offset + 8 + nameHeaderLength;
        var sectionLength = dataView.getUint16(offset + 6 + nameHeaderLength);
        return readIPTCData(file, startOffset, sectionLength);
        break;
      }
      // Not the marker, continue searching
      offset++;
    }
  }
  var IptcFieldMap = {
    0x78 : &#39;caption&#39;,
    0x6E : &#39;credit&#39;,
    0x19 : &#39;keywords&#39;,
    0x37 : &#39;dateCreated&#39;,
    0x50 : &#39;byline&#39;,
    0x55 : &#39;bylineTitle&#39;,
    0x7A : &#39;captionWriter&#39;,
    0x69 : &#39;headline&#39;,
    0x74 : &#39;copyright&#39;,
    0x0F : &#39;category&#39;
  };
  function readIPTCData(file, startOffset, sectionLength){
    var dataView = new DataView(file);
    var data = {};
    var fieldValue, fieldName, dataSize, segmentType, segmentSize;
    var segmentStartPos = startOffset;
    while(segmentStartPos < startOffset+sectionLength) {
      if(dataView.getUint8(segmentStartPos) === 0x1C && dataView.getUint8(segmentStartPos+1) === 0x02){
        segmentType = dataView.getUint8(segmentStartPos+2);
        if(segmentType in IptcFieldMap) {
          dataSize = dataView.getInt16(segmentStartPos+3);
          segmentSize = dataSize + 5;
          fieldName = IptcFieldMap[segmentType];
          fieldValue = getStringFromDB(dataView, segmentStartPos+5, dataSize);
          // Check if we already stored a value with this name
          if(data.hasOwnProperty(fieldName)) {
            // Value already stored with this name, create multivalue field
            if(data[fieldName] instanceof Array) {
              data[fieldName].push(fieldValue);
            }
            else {
              data[fieldName] = [data[fieldName], fieldValue];
            }
          }
          else {
            data[fieldName] = fieldValue;
          }
        }
      }
      segmentStartPos++;
    }
    return data;
  }
  function readTags(file, tiffStart, dirStart, strings, bigEnd) {
    var entries = file.getUint16(dirStart, !bigEnd),
      tags = {},
      entryOffset, tag,
      i;
    for (i=0;i<entries;i++) {
      entryOffset = dirStart + i*12 + 2;
      tag = strings[file.getUint16(entryOffset, !bigEnd)];
      if (!tag && debug) console.log("Unknown tag: " + file.getUint16(entryOffset, !bigEnd));
      tags[tag] = readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd);
    }
    return tags;
  }
  function readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd) {
    var type = file.getUint16(entryOffset+2, !bigEnd),
      numValues = file.getUint32(entryOffset+4, !bigEnd),
      valueOffset = file.getUint32(entryOffset+8, !bigEnd) + tiffStart,
      offset,
      vals, val, n,
      numerator, denominator;
    switch (type) {
      case 1: // byte, 8-bit unsigned int
      case 7: // undefined, 8-bit byte, value depending on field
        if (numValues == 1) {
          return file.getUint8(entryOffset + 8, !bigEnd);
        } else {
          offset = numValues > 4 ? valueOffset : (entryOffset + 8);
          vals = [];
          for (n=0;n<numValues;n++) {
            vals[n] = file.getUint8(offset + n);
          }
          return vals;
        }
      case 2: // ascii, 8-bit byte
        offset = numValues > 4 ? valueOffset : (entryOffset + 8);
        return getStringFromDB(file, offset, numValues-1);
      case 3: // short, 16 bit int
        if (numValues == 1) {
          return file.getUint16(entryOffset + 8, !bigEnd);
        } else {
          offset = numValues > 2 ? valueOffset : (entryOffset + 8);
          vals = [];
          for (n=0;n<numValues;n++) {
            vals[n] = file.getUint16(offset + 2*n, !bigEnd);
          }
          return vals;
        }
      case 4: // long, 32 bit int
        if (numValues == 1) {
          return file.getUint32(entryOffset + 8, !bigEnd);
        } else {
          vals = [];
          for (n=0;n<numValues;n++) {
            vals[n] = file.getUint32(valueOffset + 4*n, !bigEnd);
          }
          return vals;
        }
      case 5:  // rational = two long values, first is numerator, second is denominator
        if (numValues == 1) {
          numerator = file.getUint32(valueOffset, !bigEnd);
          denominator = file.getUint32(valueOffset+4, !bigEnd);
          val = new Number(numerator / denominator);
          val.numerator = numerator;
          val.denominator = denominator;
          return val;
        } else {
          vals = [];
          for (n=0;n<numValues;n++) {
            numerator = file.getUint32(valueOffset + 8*n, !bigEnd);
            denominator = file.getUint32(valueOffset+4 + 8*n, !bigEnd);
            vals[n] = new Number(numerator / denominator);
            vals[n].numerator = numerator;
            vals[n].denominator = denominator;
          }
          return vals;
        }
      case 9: // slong, 32 bit signed int
        if (numValues == 1) {
          return file.getInt32(entryOffset + 8, !bigEnd);
        } else {
          vals = [];
          for (n=0;n<numValues;n++) {
            vals[n] = file.getInt32(valueOffset + 4*n, !bigEnd);
          }
          return vals;
        }
      case 10: // signed rational, two slongs, first is numerator, second is denominator
        if (numValues == 1) {
          return file.getInt32(valueOffset, !bigEnd) / file.getInt32(valueOffset+4, !bigEnd);
        } else {
          vals = [];
          for (n=0;n<numValues;n++) {
            vals[n] = file.getInt32(valueOffset + 8*n, !bigEnd) / file.getInt32(valueOffset+4 + 8*n, !bigEnd);
          }
          return vals;
        }
    }
  }
  function getStringFromDB(buffer, start, length) {
    var outstr = "";
    for (n = start; n < start+length; n++) {
      outstr += String.fromCharCode(buffer.getUint8(n));
    }
    return outstr;
  }
  function readEXIFData(file, start) {
    if (getStringFromDB(file, start, 4) != "Exif") {
      if (debug) console.log("Not valid EXIF data! " + getStringFromDB(file, start, 4));
      return false;
    }
    var bigEnd,
      tags, tag,
      exifData, gpsData,
      tiffOffset = start + 6;
    // test for TIFF validity and endianness
    if (file.getUint16(tiffOffset) == 0x4949) {
      bigEnd = false;
    } else if (file.getUint16(tiffOffset) == 0x4D4D) {
      bigEnd = true;
    } else {
      if (debug) console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)");
      return false;
    }
    if (file.getUint16(tiffOffset+2, !bigEnd) != 0x002A) {
      if (debug) console.log("Not valid TIFF data! (no 0x002A)");
      return false;
    }
    var firstIFDOffset = file.getUint32(tiffOffset+4, !bigEnd);
    if (firstIFDOffset < 0x00000008) {
      if (debug) console.log("Not valid TIFF data! (First offset less than 8)", file.getUint32(tiffOffset+4, !bigEnd));
      return false;
    }
    tags = readTags(file, tiffOffset, tiffOffset + firstIFDOffset, TiffTags, bigEnd);
    if (tags.ExifIFDPointer) {
      exifData = readTags(file, tiffOffset, tiffOffset + tags.ExifIFDPointer, ExifTags, bigEnd);
      for (tag in exifData) {
        switch (tag) {
          case "LightSource" :
          case "Flash" :
          case "MeteringMode" :
          case "ExposureProgram" :
          case "SensingMethod" :
          case "SceneCaptureType" :
          case "SceneType" :
          case "CustomRendered" :
          case "WhiteBalance" :
          case "GainControl" :
          case "Contrast" :
          case "Saturation" :
          case "Sharpness" :
          case "SubjectDistanceRange" :
          case "FileSource" :
            exifData[tag] = StringValues[tag][exifData[tag]];
            break;
          case "ExifVersion" :
          case "FlashpixVersion" :
            exifData[tag] = String.fromCharCode(exifData[tag][0], exifData[tag][1], exifData[tag][2], exifData[tag][3]);
            break;
          case "ComponentsConfiguration" :
            exifData[tag] =
              StringValues.Components[exifData[tag][0]] +
              StringValues.Components[exifData[tag][1]] +
              StringValues.Components[exifData[tag][2]] +
              StringValues.Components[exifData[tag][3]];
            break;
        }
        tags[tag] = exifData[tag];
      }
    }
    if (tags.GPSInfoIFDPointer) {
      gpsData = readTags(file, tiffOffset, tiffOffset + tags.GPSInfoIFDPointer, GPSTags, bigEnd);
      for (tag in gpsData) {
        switch (tag) {
          case "GPSVersionID" :
            gpsData[tag] = gpsData[tag][0] +
              "." + gpsData[tag][1] +
              "." + gpsData[tag][2] +
              "." + gpsData[tag][3];
            break;
        }
        tags[tag] = gpsData[tag];
      }
    }
    return tags;
  }
  EXIF.getData = function(img, callback) {
    if ((img instanceof Image || img instanceof HTMLImageElement) && !img.complete) return false;
    if (!imageHasData(img)) {
      getImageData(img, callback);
    } else {
      if (callback) {
        callback.call(img);
      }
    }
    return true;
  }
  EXIF.getTag = function(img, tag) {
    if (!imageHasData(img)) return;
    return img.exifdata[tag];
  }
  EXIF.getAllTags = function(img) {
    if (!imageHasData(img)) return {};
    var a,
      data = img.exifdata,
      tags = {};
    for (a in data) {
      if (data.hasOwnProperty(a)) {
        tags[a] = data[a];
      }
    }
    return tags;
  }
  EXIF.pretty = function(img) {
    if (!imageHasData(img)) return "";
    var a,
      data = img.exifdata,
      strPretty = "";
    for (a in data) {
      if (data.hasOwnProperty(a)) {
        if (typeof data[a] == "object") {
          if (data[a] instanceof Number) {
            strPretty += a + " : " + data[a] + " [" + data[a].numerator + "/" + data[a].denominator + "]\r\n";
          } else {
            strPretty += a + " : [" + data[a].length + " values]\r\n";
          }
        } else {
          strPretty += a + " : " + data[a] + "\r\n";
        }
      }
    }
    return strPretty;
  }
  EXIF.readFromBinaryFile = function(file) {
    return findEXIFinJPEG(file);
  }
  if (typeof define === 'function' && define.amd) {
    define('exif-js', [], function() {
      return EXIF;
    });
  }
}.call(this));
登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用vue.extend實作alert模態框彈出視窗元件

如何使用vue元件實作彈出框點選顯示隱藏

#

以上是如何使用Vue2.0調用相機進行拍照的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

<🎜>：種植花園 - 完整的突變指南
3 週前 By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前 By DDD
北端：融合系統，解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1249
24
顯示更多
Related knowledge
利用PHP控制攝影機：從連接到拍攝的全過程解析 利用PHP控制攝影機：從連接到拍攝的全過程解析 Jul 30, 2023 pm 03:21 PM

利用PHP控制攝影機：從連接到拍攝的全過程解析攝影機的應用越來越廣泛，例如視訊通話、監視系統等。而在Web應用中，我們常常需要透過PHP來控制和操作攝影機。本文將介紹如何利用PHP來實現從相機連接到拍攝的整個過程。確認攝影機的連接狀態在開始操作攝影機之前，我們首先需要確認攝影機的連接狀態。 PHP提供了擴充庫video來實現對相機的操作。我們可以透過以下程式碼

如何使用Python呼叫百度地圖API實作地理位置查詢功能？ 如何使用Python呼叫百度地圖API實作地理位置查詢功能？ Jul 31, 2023 pm 03:01 PM

如何使用Python呼叫百度地圖API實作地理位置查詢功能？隨著網路的發展，地理位置資訊的取得和利用越來越重要。百度地圖是一款非常常見且實用的地圖應用，它提供了豐富的地理位置查詢服務。本文將介紹如何使用Python呼叫百度地圖API實作地理位置查詢功能，並附上程式碼範例。申請百度地圖開發者帳號和應用程式首先，你需要擁有一個百度地圖開發者帳號，並建立一個應用程式。登入

如何解決Windows Hello不支援的相機問題 如何解決Windows Hello不支援的相機問題 Jan 05, 2024 pm 05:38 PM

在使用windowshello中，找不到支援的鏡頭，常見的原因是使用的攝影機不支援人臉辨識、攝影機驅動安裝不正確導致的，那麼接下來讓我們一起去看一下怎麼去設定。 windowshello找不到支援的攝影機教學：原因一：攝影機驅動安裝不對1、一般來說Win10系統可以自動為大部分攝影機安裝驅動程序，如下，插上攝影機之後會有通知;2、這時我們打開設備管理器看看，攝影機驅動是否安裝好，沒有的話就需要手動操作一下。 WIN+X，然後選擇裝置管理員;3、裝置管理員視窗中，展開照相機選項，會顯示相機的驅動型號

攝影機已離線什麼意思 攝影機已離線什麼意思 Dec 07, 2023 pm 04:05 PM

攝影機已離線指攝影機無法再進行正常的視訊傳輸，即無法即時監控。這通常是由於相機與主機之間的連接已斷開，或者相機本身出現了故障。可能導致攝影機離線的原因：1、網路問題；2、電源問題；3、訊號線路問題；4、攝影機故障；5、軟體問題。攝影機已離線需要檢查網路連接、電源、訊號線路、軟體等方面的問題，找到原因並解決，同時也需要注意保護個人隱私和資料安全的問題。

如何利用PHP呼叫攝影機進行二維碼掃描 如何利用PHP呼叫攝影機進行二維碼掃描 Jul 30, 2023 pm 12:53 PM

如何利用PHP呼叫攝影機進行二維碼掃描攝影機掃描二維碼在現代應用中越來越常見，能夠提供方便快速的訊息傳遞和互動方式。在網路應用中，我們可以使用PHP呼叫攝影機進行二維碼掃描，並將掃描到的資訊用於後續的處理和展示。本文將介紹如何使用PHP呼叫攝影機進行二維碼掃描，並提供對應的程式碼範例。準備工作在開始之前，我們需要為PHP環境配置對應的擴充庫和功能。首先，確保

win10監視器開啟照片的方法 win10監視器開啟照片的方法 Jul 10, 2023 pm 09:41 PM

如果我們手邊沒有手機，只有電腦，但我們必須拍照，我們可以使用電腦內建的監視器拍照，那麼如何打開win10監視器，事實上，我們只需要下載一個相機應用程式。開啟win10監視器的具體方法。 win10監視器開啟照片的方法:1.首先，盤快捷鍵Win+i開啟設定。 2.打開後，進入個人隱私設定。 3.然後在相機手機權限下開啟存取限制。 4.開啟後，您只需開啟相機應用軟體。 (如果沒有，可以去微軟店下載一個)5.打開後，如果電腦內置監控攝像頭或組裝了外部監控攝像頭，則可以拍照。 (因為人們沒有安裝攝

Win11攝影機問題解決方案：解決Win11攝影機無法使用的四種方法 Win11攝影機問題解決方案：解決Win11攝影機無法使用的四種方法 Jan 29, 2024 pm 12:03 PM

攝影機是我們在使用電腦的時候可以幫助我們進行視訊聊天的工具，但是也有不少的用戶們在使用win11系統的時候發現自己的攝影機不能使用，那麼這是怎麼回事？使用者可以進入到疑難排解下來進行設定或是檢查相機的權限來進行操作就可以了。以下就讓本站來為用戶們來仔細的介紹一下Win11攝影機無法使用的四種解決方法吧。 Win11相機無法使用的四種解決方法解決方法一、使用內置疑難解答1、按+開啟設置，然後點選系統標籤中的疑難排解。 WindowsI4、依照螢幕上的指示完成故障排除程序並進行建議的變更。 5.使用

如何打開攝影機 教你Win7攝影機怎麼打開 如何打開攝影機 教你Win7攝影機怎麼打開 Jan 11, 2024 pm 07:48 PM

相信有用戶遇到這麼一個問題了，win7系統卻找不到攝像頭快捷在哪，只能從程序裡面調出攝像頭功能，不知道內情的人還以為是攝像頭的驅動沒有安裝呢，因此給有需要的win7用戶在使用相機的時候製造了不小的麻煩。下面，小編就來帶了Win7攝影機的開啟教學給大家。使用筆記型電腦的用戶都曉得筆記型自有攝影機功能，不像桌上型電腦需要連接攝影機，在筆記型win7系統中直接開啟攝影機就可以使用，非常方便。不過有用戶一般的情況下都沒有去摸索，嘗試很多方法還是失敗，下面，小編就來跟大家說說Win7攝像頭的打開方法

See all articles