编程教育资源分享平台

网站首页 > web前端 正文

uni-app上传图片并支持h5端添加水印,支持拍照、单图、多图片

luoriw 2023-10-21 09:20:14 web前端 18 ℃ 0 评论

.vue文件:

<template>
	<view>
		<view class="login-bg">
			<view class="login-btn">
				<button class="btn-class" @click="selectImg">选择图片</button>
				<text class="page-lable">结果:</text>
				<view class="img-box" v-for="item in photoData"><img :src="item" /></view>
			</view>
			<view class="canvas"><canvas canvas-id="myCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas></view>
		</view>
	</view>
</template>

<script>
import { getImageData } from '@/js_sdk/izExif/izExif.js';
export default {
	components: {},
	data() {
		return {
			photoData: [],
			photoArr: [],
			type:'',
			canvasWidth: '1080',
			canvasHeight: '1440',
			pixelRatio: 1,
			photoIndex: 0,
			maxSize: 1080,
			userName:uni.getStorageSync('employee').employeeName || '张三'
		};
	},
	mounted() {
		let _this = this;
		
		// #ifdef H5
			this.type = 'h5';
		// #endif
		
		wx.getSystemInfo({
			success: function(data) {
				console.log(data);
				_this.pixelRatio = data.pixelRatio;
			}
		});
		console.log(uni.getWindowInfo());
	},
	methods: {
		formatTime(date, type) {
			// 判断传入值date是否存在
			if (!date) {
				return
			}
			// 将date时间戳转换为标准时间
			if (typeof date == 'string') {
				date = date.replace(/-/g, '/');
				if (date.indexOf('T') > -1) {
					date = date.replace(/T/g, ' ');
					var index = date.indexOf('.');
					date = date.substr(0, index);
				}
			}
			var time = new Date(date)
			// 提取年月日
			var Y = time.getFullYear()
			var M = time.getMonth() + 1
			var D = time.getDate()
			// 提取星期
			var W = time.getDay()
			// 提取时分秒
			var h = time.getHours()
			var m = time.getMinutes()
			var s = time.getSeconds()
			// 不足10的填充0
			M = M >= 10 ? M : '0' + M
			D = D >= 10 ? D : '0' + D
			h = h >= 10 ? h : '0' + h
			m = m >= 10 ? m : '0' + m
			s = s >= 10 ? s : '0' + s
			// 输出时间格式
			if (type === 1) {
				var weekDay = ['一', '二', '三', '四', '五', '六', '天']
				return Y + '-' + M + '-' + D + ' 星期' + weekDay[W] + ' ' + h + ' : ' + m + ' : ' + s // YYYY/MM/DD  W  hh:mm:ss
			} else if (type === 2) {
				return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s // YYYY/MM/DD  hh:mm:ss
			} else if (type === 3) {
				return Y + '-' + M // YYYY/MM
			} else if (type === 4) {
				return Y + '-' + M + '-' + D + ' ' + h + ':' + m // YYYY/MM/DD  hh:mm
			}  else {
				return Y + '-' + M + '-' + D // YYYY/MM/DD
			}
		},
		selectImg() {
			let _this = this;
			this.photoIndex = 0;
			uni.chooseImage({
				count: 6,
				sizeType: ['original'],
				sourceType: ['album', 'camera'],
				success: function(res) {
					uni.showLoading({
						title: '制作水印中...'
					});
					_this.photoArr = res.tempFilePaths;
					const newArr = [];
					res.tempFilePaths.some((img, index) => {
						getImageData(img).then(exif => {
							newArr.push({ index: index, createTime:exif.exif.DateTimeOriginal, uploadTime: _this.formatTime(new Date().getTime(),2), img: img });
							if (newArr.length == _this.photoArr.length) {
								_this.photoArr = newArr;
								_this.addWaterMark();
							}
						});
					});
				}
			});
		},
		// 调用添加水印的函数
		addWaterMark() {
			var _this = this;
			if(_this.type == 'h5'){
				// this.h5CanvasDraw()
				this.h5CanvasDraw(function(){
					if (_this.photoIndex <= _this.photoArr.length - 1) {
						_this.photoIndex++;
						_this.addWaterMark();
					}
				})
			}else{
				this.otherCanvasDraw(function() {
					if (_this.photoIndex <= _this.photoArr.length - 1) {
						_this.photoIndex++;
						_this.addWaterMark();
					}
				});
			}
		},
		h5CanvasDraw(callback) {
			let _this = this;
			const img = new Image()
			img.src = _this.photoArr[_this.photoIndex].img,
			img.crossOrigin = 'anonymous'
			img.onload = function() {
				let size = _this.maxSize || 0;
				if (_this.maxSize) {
					if (img.width > img.height) {
						if (img.width < size) {
							size = img.width;
						}
						_this.canvasWidth = size;
						_this.canvasHeight = img.height / (img.width / size);
					} else {
						if (img.height < size) {
							size = img.height;
						}
						_this.canvasHeight = size;
						_this.canvasWidth = img.width / (img.height / size);
					}
				} else {
					_this.canvasWidth = img.width
					_this.canvasHeight = img.height
				}
				const canvas = document.createElement('canvas')
				canvas.width = _this.canvasWidth
				canvas.height = _this.canvasHeight
				const ctx = canvas.getContext('2d')
				ctx.drawImage(img, 0, 0,_this.canvasWidth,_this.canvasHeight)
				ctx.textAlign = 'top'
				ctx.textBaseline = 'top'
				ctx.font = '32px' + ' Arial';
				ctx.fillStyle = '#fff';
				ctx.fillText('姓名:'+ _this.userName, 10, 8);
				ctx.fillText('拍摄时间:' + _this.photoArr[_this.photoIndex].createTime, 10, 55);
				ctx.fillText('上传时间:' + _this.photoArr[_this.photoIndex].uploadTime, 10, 100);
				const base64Url = canvas.toDataURL()
				if(base64Url){
					_this.photoData.push(base64Url);
					uni.hideLoading();
					callback();
				}
			}
			console.log(img);
		},
		otherCanvasDraw(callback) {
			let _this = this;
			uni.getImageInfo({
				src: _this.photoArr[_this.photoIndex].img,
				success: function(img) {
					let size = _this.maxSize || 0;
					if (_this.maxSize) {
						if (img.width > img.height) {
							if (img.width < size) {
								size = img.width / _this.pixelRatio;
							} else {
								size = size / _this.pixelRatio;
							}
							_this.canvasWidth = size;
							_this.canvasHeight = img.height / (img.width / size);
						} else {
							if (img.height < size) {
								size = img.height / _this.pixelRatio;
							} else {
								size = size / _this.pixelRatio;
							}
							_this.canvasHeight = size;
							_this.canvasWidth = img.width / (img.height / size);
						}
					} else {
						_this.canvasWidth = img.width / _this.pixelRatio;
						_this.canvasHeight = img.height / _this.pixelRatio;
					}
					
					const ctx = uni.createCanvasContext('myCanvas', _this);
					ctx.drawImage(_this.photoArr[_this.photoIndex].img, 0, 0, _this.canvasWidth, _this.canvasHeight);
					ctx.textAlign = 'top'; //水印文字的对齐方式
					ctx.textBaseline = 'top'; //绘制文本时的当前文本基线
					ctx.font = '12px' + ' Arial';
					ctx.fillStyle = '#fff';
					ctx.fillText('姓名:'+ _this.userName, 10, 8);
					ctx.fillText('拍摄时间:' + _this.photoArr[_this.photoIndex].createTime, 10, 28);
					ctx.fillText('上传时间:' + _this.photoArr[_this.photoIndex].uploadTime, 10, 50);
					// 开始绘制添加水印的图片并显示在页面
					ctx.draw(true, function(ret) {
						console.log(ret);
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas', // canvas id
							quality: 1,
							complete(res) {
								const savedFilePath = res.tempFilePath; //相对路径
								const path = plus.io.convertLocalFileSystemURL(savedFilePath); //绝对路径
								const fileReader = new plus.io.FileReader();
								fileReader.readAsDataURL(path);
								fileReader.onloadend = res => {
									//读取文件成功完成的回调函数
									_this.photoData.push(res.target.result);
									uni.hideLoading();
									callback();
								};
							}
						});
					});
				}
			});
		}
	},
};
</script>

<style lang="scss" scoped>
page {
	background: linear-gradient(to bottom, rgb(249, 249, 249) 0%, rgb(247, 246, 246) 100%);
}
.canvas {
	width: 0;
	height: 0;
	overflow: hidden;
}
.login-btn {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.btn-class {
	margin-top: 20px;
	width: 90vw;
	font-size: 14px;
	color: rgb(80, 80, 80);
	padding: 5px;
	background-color: #fff;
}
.page-lable {
	width: 90vw;
	padding: 10px 0;
	color: rgb(60, 60, 60);
}
.img-box {
	width: 90vw;
	min-height: 60vh;
	border-radius: 5px;
	text-align: center;
	border: 1px solid rgb(220, 220, 220);
	background-color: #fff;
	padding: 10px 0;
}
.img-box img {
	max-width: 100%;
	margin: 10px 0;
}
</style>

izExif.js代码:

function getImageData(img) {
	return new Promise(function(resolve, reject) {
		function handleBinaryFile(binFile) {
			var data = findEXIFinJPEG(binFile);
			var iptcdata = findIPTCinJPEG(binFile);
			resolve({
				exif: data || {},
				iptc: iptcdata || {}
			})
		}

		if (/^data\:/i.test(img)) { // Data URI
			var arrayBuffer = base64ToArrayBuffer(img);
			handleBinaryFile(arrayBuffer);
		} else if (/^blob\:/i.test(img)) { // Object URL
			var fileReader = new FileReader();
			fileReader.onload = function(e) {
				handleBinaryFile(e.target.result);
			};
			objectURLToBlob(img, function(blob) {
				fileReader.readAsArrayBuffer(blob);
			});
		} else {
			if (typeof window === 'object' && 'document' in window) {
				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, true);
				http.responseType = "arraybuffer";
				http.send(null);
				return
			}
			if (typeof plus === 'object') {
				plus.io.resolveLocalFileSystemURL(getLocalFilePath(img), function(entry) {
					entry.file(function(file) {
						var fileReader = new plus.io.FileReader()
						fileReader.onload = function(data) {
							var arrayBuffer = base64ToArrayBuffer(data.target.result);
							handleBinaryFile(arrayBuffer)
						}
						fileReader.onerror = function(error) {
							reject(error)
						}
						fileReader.readAsDataURL(file)
					}, function(error) {
						reject(error)
					})
				}, function(error) {
					reject(error)
				})
				return
			}
			if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
				wx.getFileSystemManager().readFile({
					filePath: img,
					success: function(res) {
						handleBinaryFile(res.data)
					},
					fail: function(error) {
						reject(error)
					}
				})
				return
			}
			reject(new Error('not support'))
		}
	})
}

function ToDigital(strDu, strFen, strMiao, len) {
    len = (len > 6 || typeof (len) == "undefined") ? 6 : len;//精确到小数点后最多六位   
    strDu = (typeof (strDu) == "undefined" || strDu == "") ? 0 : parseFloat(strDu);
    strFen = (typeof (strFen) == "undefined" || strFen == "") ? 0 : parseFloat(strFen) / 60;
    strMiao = (typeof (strMiao) == "undefined" || strMiao == "") ? 0 : parseFloat(strMiao) / 3600;
    var digital = strDu + strFen + strMiao;
    if (digital == 0) {
        return "";
    } else {
        return digital.toFixed(len);
    }
}

function getFloatLocationByExif(exif){
	if(!exif.GPSLatitude||!exif.GPSLongitude){
		return null
	}
	let lat = (exif.GPSLatitudeRef == 'S'?-1:1)*ToDigital(exif.GPSLatitude[0],exif.GPSLatitude[1],exif.GPSLatitude[2])
	let lon = (exif.GPSLongitudeRef == 'W'?-1:1)*ToDigital(exif.GPSLongitude[0],exif.GPSLongitude[1],exif.GPSLongitude[2])
	
	return {lat:lat,lon:lon}
}

function getLocalFilePath(path) {
	if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf(
			'_downloads') === 0) {
		return path
	}
	if (path.indexOf('file://') === 0) {
		return path
	}
	if (path.indexOf('/storage/emulated/0/') === 0) {
		return path
	}
	if (path.indexOf('/') === 0) {
		var localFilePath = plus.io.convertAbsoluteFileSystem(path)
		if (localFilePath !== path) {
			return localFilePath
		} else {
			path = path.substr(1)
		}
	}
	return '_www/' + path
}

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 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 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'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 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];
		}
	}

	// extract thumbnail
	tags['thumbnail'] = readThumbnailImage(file, tiffOffset, firstIFDOffset, bigEnd);

	return tags;
}

function getStringFromDB(buffer, start, length) {
	var outstr = "";
	for (var n = start; n < start + length; n++) {
		outstr += String.fromCharCode(buffer.getUint8(n));
	}
	return outstr;
}

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;
}

// 
var 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 = {
	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"
};

// EXIF 2.3 Spec
var IFD1Tags = {
	0x0100: "ImageWidth",
	0x0101: "ImageHeight",
	0x0102: "BitsPerSample",
	0x0103: "Compression",
	0x0106: "PhotometricInterpretation",
	0x0111: "StripOffsets",
	0x0112: "Orientation",
	0x0115: "SamplesPerPixel",
	0x0116: "RowsPerStrip",
	0x0117: "StripByteCounts",
	0x011A: "XResolution",
	0x011B: "YResolution",
	0x011C: "PlanarConfiguration",
	0x0128: "ResolutionUnit",
	0x0201: "JpegIFOffset", // When image format is JPEG, this value show offset to JPEG data stored.(aka "ThumbnailOffset" or "JPEGInterchangeFormat")
	0x0202: "JpegIFByteCount", // When image format is JPEG, this value shows data size of JPEG image (aka "ThumbnailLength" or "JPEGInterchangeFormatLength")
	0x0211: "YCbCrCoefficients",
	0x0212: "YCbCrSubSampling",
	0x0213: "YCbCrPositioning",
	0x0214: "ReferenceBlackWhite"
};

var 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"
	}
};

var ExifTags = {

	// 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
};

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 readThumbnailImage(dataView, tiffStart, firstIFDOffset, bigEnd) {
	// get the IFD1 offset
	var IFD1OffsetPointer = getNextIFDOffset(dataView, tiffStart + firstIFDOffset, bigEnd);

	if (!IFD1OffsetPointer) {
		// console.log('******** IFD1Offset is empty, image thumb not found ********');
		return {};
	} else if (IFD1OffsetPointer > dataView.byteLength) { // this should not happen
		// console.log('******** IFD1Offset is outside the bounds of the DataView ********');
		return {};
	}
	// console.log('*******  thumbnail IFD offset (IFD1) is: %s', IFD1OffsetPointer);

	var thumbTags = readTags(dataView, tiffStart, tiffStart + IFD1OffsetPointer, IFD1Tags, bigEnd)

	// EXIF 2.3 specification for JPEG format thumbnail

	// If the value of Compression(0x0103) Tag in IFD1 is '6', thumbnail image format is JPEG.
	// Most of Exif image uses JPEG format for thumbnail. In that case, you can get offset of thumbnail
	// by JpegIFOffset(0x0201) Tag in IFD1, size of thumbnail by JpegIFByteCount(0x0202) Tag.
	// Data format is ordinary JPEG format, starts from 0xFFD8 and ends by 0xFFD9. It seems that
	// JPEG format and 160x120pixels of size are recommended thumbnail format for Exif2.1 or later.

	if (thumbTags['Compression']) {
		// console.log('Thumbnail image found!');

		switch (thumbTags['Compression']) {
			case 6:
				// console.log('Thumbnail image format is JPEG');
				if (thumbTags.JpegIFOffset && thumbTags.JpegIFByteCount) {
					// extract the thumbnail
					var tOffset = tiffStart + thumbTags.JpegIFOffset;
					var tLength = thumbTags.JpegIFByteCount;
					//iz
					// thumbTags['blob'] = new Blob([new Uint8Array(dataView.buffer, tOffset, tLength)], {
					//     type: 'image/jpeg'
					// });
				}
				break;

			case 1:
				console.log("Thumbnail image format is TIFF, which is not implemented.");
				break;
			default:
				console.log("Unknown thumbnail image format '%s'", thumbTags['Compression']);
		}
	} else if (thumbTags['PhotometricInterpretation'] == 2) {
		console.log("Thumbnail image format is RGB, which is not implemented.");
	}
	return thumbTags;
}

function getNextIFDOffset(dataView, dirStart, bigEnd) {
	//the first 2bytes means the number of directory entries contains in this IFD
	var entries = dataView.getUint16(dirStart, !bigEnd);

	// After last directory entry, there is a 4bytes of data,
	// it means an offset to next IFD.
	// If its value is '0x00000000', it means this is the last IFD and there is no linked IFD.

	return dataView.getUint32(dirStart + 2 + entries * 12, !bigEnd); // each entry is 12 bytes long
}

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 debug = true;

export {
	getImageData,
	getFloatLocationByExif
}

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言