Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下
可以在github上下载demo链接
vue组件代码
本文实例为大家分享了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;n 4?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 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。