Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

2023-09-13 14:31:07 316
本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码，以及图片上传功能引用exif.js，供大家参考，具体内容如下
可以在github上下载demo链接
vue组件代码
引用的exif.js代码
(function(){

vardebug=false;

varroot=this;

varEXIF=function(obj){
if(objinstanceofEXIF)returnobj;
if(!(thisinstanceofEXIF))returnnewEXIF(obj);
this.EXIFwrapped=obj;
};

if(typeofexports!=='undefined'){
if(typeofmodule!=='undefined'&&module.exports){
exports=module.exports=EXIF;
}
exports.EXIF=EXIF;
}else{
root.EXIF=EXIF;
}

varExifTags=EXIF.Tags={

//versiontags
0x9000:"ExifVersion",//EXIFversion
0xA000:"FlashpixVersion",//Flashpixformatversion

//colorspacetags
0xA001:"ColorSpace",//Colorspaceinformationtag

//imageconfiguration
0xA002:"PixelXDimension",//Validwidthofmeaningfulimage
0xA003:"PixelYDimension",//Validheightofmeaningfulimage
0x9101:"ComponentsConfiguration",//Informationaboutchannels
0x9102:"CompressedBitsPerPixel",//Compressedbitsperpixel

//userinformation
0x927C:"MakerNote",//Anydesiredinformationwrittenbythemanufacturer
0x9286:"UserComment",//Commentsbyuser

//relatedfile
0xA004:"RelatedSoundFile",//Nameofrelatedsoundfile

//dateandtime
0x9003:"DateTimeOriginal",//Dateandtimewhentheoriginalimagewasgenerated
0x9004:"DateTimeDigitized",//Dateandtimewhentheimagewasstoreddigitally
0x9290:"SubsecTime",//FractionsofsecondsforDateTime
0x9291:"SubsecTimeOriginal",//FractionsofsecondsforDateTimeOriginal
0x9292:"SubsecTimeDigitized",//FractionsofsecondsforDateTimeDigitized

//picture-takingconditions
0x829A:"ExposureTime",//Exposuretime(inseconds)
0x829D:"FNumber",//Fnumber
0x8822:"ExposureProgram",//Exposureprogram
0x8824:"SpectralSensitivity",//Spectralsensitivity
0x8827:"ISOSpeedRatings",//ISOspeedrating
0x8828:"OECF",//Optoelectricconversionfactor
0x9201:"ShutterSpeedValue",//Shutterspeed
0x9202:"ApertureValue",//Lensaperture
0x9203:"BrightnessValue",//Valueofbrightness
0x9204:"ExposureBias",//Exposurebias
0x9205:"MaxApertureValue",//SmallestFnumberoflens
0x9206:"SubjectDistance",//Distancetosubjectinmeters
0x9207:"MeteringMode",//Meteringmode
0x9208:"LightSource",//Kindoflightsource
0x9209:"Flash",//Flashstatus
0x9214:"SubjectArea",//Locationandareaofmainsubject
0x920A:"FocalLength",//Focallengthofthelensinmm
0xA20B:"FlashEnergy",//StrobeenergyinBCPS
0xA20C:"SpatialFrequencyResponse",//
0xA20E:"FocalPlaneXResolution",//NumberofpixelsinwidthdirectionperFocalPlaneResolutionUnit
0xA20F:"FocalPlaneYResolution",//NumberofpixelsinheightdirectionperFocalPlaneResolutionUnit
0xA210:"FocalPlaneResolutionUnit",//UnitformeasuringFocalPlaneXResolutionandFocalPlaneYResolution
0xA214:"SubjectLocation",//Locationofsubjectinimage
0xA215:"ExposureIndex",//Exposureindexselectedoncamera
0xA217:"SensingMethod",//Imagesensortype
0xA300:"FileSource",//Imagesource(3==DSC)
0xA301:"SceneType",//Scenetype(1==directlyphotographed)
0xA302:"CFAPattern",//Colorfilterarraygeometricpattern
0xA401:"CustomRendered",//Specialprocessing
0xA402:"ExposureMode",//Exposuremode
0xA403:"WhiteBalance",//1=autowhitebalance,2=manual
0xA404:"DigitalZoomRation",//Digitalzoomratio
0xA405:"FocalLengthIn35mmFilm",//Equivalentfoacllengthassuming35mmfilmcamera(inmm)
0xA406:"SceneCaptureType",//Typeofscene
0xA407:"GainControl",//Degreeofoverallimagegainadjustment
0xA408:"Contrast",//Directionofcontrastprocessingappliedbycamera
0xA409:"Saturation",//Directionofsaturationprocessingappliedbycamera
0xA40A:"Sharpness",//Directionofsharpnessprocessingappliedbycamera
0xA40B:"DeviceSettingDescription",//
0xA40C:"SubjectDistanceRange",//Distancetosubject

//othertags
0xA005:"InteroperabilityIFDPointer",
0xA420:"ImageUniqueID"//Identifierassigneduniquelytoeachimage
};

varTiffTags=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"
};

varGPSTags=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"
};

varStringValues=EXIF.StringValues={
ExposureProgram:{
0:"Notdefined",
1:"Manual",
2:"Normalprogram",
3:"Aperturepriority",
4:"Shutterpriority",
5:"Creativeprogram",
6:"Actionprogram",
7:"Portraitmode",
8:"Landscapemode"
},
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(incandescentlight)",
4:"Flash",
9:"Fineweather",
10:"Cloudyweather",
11:"Shade",
12:"Daylightfluorescent(D5700-7100K)",
13:"Daywhitefluorescent(N4600-5400K)",
14:"Coolwhitefluorescent(W3900-4500K)",
15:"Whitefluorescent(WW3200-3700K)",
17:"StandardlightA",
18:"StandardlightB",
19:"StandardlightC",
20:"D55",
21:"D65",
22:"D75",
23:"D50",
24:"ISOstudiotungsten",
255:"Other"
},
Flash:{
0x0000:"Flashdidnotfire",
0x0001:"Flashfired",
0x0005:"Strobereturnlightnotdetected",
0x0007:"Strobereturnlightdetected",
0x0009:"Flashfired,compulsoryflashmode",
0x000D:"Flashfired,compulsoryflashmode,returnlightnotdetected",
0x000F:"Flashfired,compulsoryflashmode,returnlightdetected",
0x0010:"Flashdidnotfire,compulsoryflashmode",
0x0018:"Flashdidnotfire,automode",
0x0019:"Flashfired,automode",
0x001D:"Flashfired,automode,returnlightnotdetected",
0x001F:"Flashfired,automode,returnlightdetected",
0x0020:"Noflashfunction",
0x0041:"Flashfired,red-eyereductionmode",
0x0045:"Flashfired,red-eyereductionmode,returnlightnotdetected",
0x0047:"Flashfired,red-eyereductionmode,returnlightdetected",
0x0049:"Flashfired,compulsoryflashmode,red-eyereductionmode",
0x004D:"Flashfired,compulsoryflashmode,red-eyereductionmode,returnlightnotdetected",
0x004F:"Flashfired,compulsoryflashmode,red-eyereductionmode,returnlightdetected",
0x0059:"Flashfired,automode,red-eyereductionmode",
0x005D:"Flashfired,automode,returnlightnotdetected,red-eyereductionmode",
0x005F:"Flashfired,automode,returnlightdetected,red-eyereductionmode"
},
SensingMethod:{
1:"Notdefined",
2:"One-chipcolorareasensor",
3:"Two-chipcolorareasensor",
4:"Three-chipcolorareasensor",
5:"Colorsequentialareasensor",
7:"Trilinearsensor",
8:"Colorsequentiallinearsensor"
},
SceneCaptureType:{
0:"Standard",
1:"Landscape",
2:"Portrait",
3:"Nightscene"
},
SceneType:{
1:"Directlyphotographed"
},
CustomRendered:{
0:"Normalprocess",
1:"Customprocess"
},
WhiteBalance:{
0:"Autowhitebalance",
1:"Manualwhitebalance"
},
GainControl:{
0:"None",
1:"Lowgainup",
2:"Highgainup",
3:"Lowgaindown",
4:"Highgaindown"
},
Contrast:{
0:"Normal",
1:"Soft",
2:"Hard"
},
Saturation:{
0:"Normal",
1:"Lowsaturation",
2:"Highsaturation"
},
Sharpness:{
0:"Normal",
1:"Soft",
2:"Hard"
},
SubjectDistanceRange:{
0:"Unknown",
1:"Macro",
2:"Closeview",
3:"Distantview"
},
FileSource:{
3:"DSC"
},

Components:{
0:"",
1:"Y",
2:"Cb",
3:"Cr",
4:"R",
5:"G",
6:"B"
}
};

functionaddEvent(element,event,handler){
if(element.addEventListener){
element.addEventListener(event,handler,false);
}elseif(element.attachEvent){
element.attachEvent("on"+event,handler);
}
}

functionimageHasData(img){
return!!(img.exifdata);
}


functionbase64ToArrayBuffer(base64,contentType){
contentType=contentType||base64.match(/^data\:([^\;]+)\;base64,/mi)[1]||'';//e.g.'data:image/jpeg;base64,...'=>'image/jpeg'
base64=base64.replace(/^data\:([^\;]+)\;base64,/gmi,'');
varbinary=atob(base64);
varlen=binary.length;
varbuffer=newArrayBuffer(len);
varview=newUint8Array(buffer);
for(vari=0;i4?valueOffset:(entryOffset+8);
vals=[];
for(n=0;n4?valueOffset:(entryOffset+8);
returngetStringFromDB(file,offset,numValues-1);

case3://short,16bitint
if(numValues==1){
returnfile.getUint16(entryOffset+8,!bigEnd);
}else{
offset=numValues>2?valueOffset:(entryOffset+8);
vals=[];
for(n=0;n
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

热门推荐

随机推荐
