console
var ImageTool = {
getSegments: function (rawImage, callback) {
if (rawImage instanceof Blob) {
var that = this;
var fileReader = new FileReader();
fileReader.onload = function () {
that.getSegments(fileReader.result,
callback);
};
fileReader.readAsArrayBuffer(rawImage);
} else {
if (!rawImage.length && !rawImage.byteLength) {
return [];
}
var head = 0,
segments = [];
var length, endPoint, seg;
var arr = [].slice.call(new Uint8Array(rawImage), 0);
while (1) {
if (arr[head] === 0xff && arr[head + 1] === 0xda) {
break;
}
if (arr[head] === 0xff && arr[head +
1] === 0xd8) {
head += 2;
} else {
length = arr[head + 2] * 256 + arr[head + 3];
endPoint = head + length + 2;
seg = arr.slice(head, endPoint);
head = endPoint;
segments.push(seg);
}
if (head > arr.length) {
break;
}
}
callback(segments);
}
},
insertEXIF: function (resizedImg, exifArr, callback) {
if (resizedImg instanceof Blob) {
var that = this;
var fileReader = new FileReader();
fileReader.onload = function () {
that.insertEXIF(fileReader.result,
exifArr, callback);
};
fileReader.readAsArrayBuffer(resizedImg);
} else {
var arr = [].slice.call(new Uint8Array(resizedImg),
0);
if (arr[2] !== 0xff || arr[3] !== 0xe0) {
return resizedImg;
}
var app0_length = arr[4] * 256 + arr[5];
var newImage = [0xff, 0xd8].concat(exifArr, arr.slice(4 +
app0_length));
callback(new Uint8Array(newImage));
}
},
getEXIF: function (segments) {
if (!segments.length) {
return [];
}
var seg = [];
for (var x = 0; x < segments.length; x++) {
var s = segments[x];
if (s[0] === 0xff && s[1] === 0xe1) {
}
}
return seg;
},
decode64: function (base64) {
var b64 = "data:image/jpeg;base64,";
if (base64.slice(0,
23) !== b64) {
return [];
}
var binStr = window.atob(base64.replace(b64, ""));
var buf = new Uint8Array(binStr.length);
for (var i = 0, len = binStr.length; i < len; i++) {
buf[i] = binStr.charCodeAt(i);
}
return buf;
},
encode64: function (arr) {
var data = "";
for (var i = 0, len = arr.length; i < len; i++) {
data += String.fromCharCode(arr[i]);
}
return "data:image/jpeg;base64," + window.btoa(data);
}
};
var filedom = document.getElementById("filedom");
var imgdom = document.getElementById("img");
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log('filedom: ', filedom);
var imgFile = filedom.files[0];
if (!imgFile) {
alert("请选择图片文件!");
return false;
}
showImage(imgFile, function (src) {
imgdom.src = src;
imgdom.onload = function () {
imageResize(imgdom, 400, 225, 1, function (blob) {
ImageTool.getSegments(imgFile, function (segments) {
var exif = ImageTool.getEXIF(segments);
ImageTool.insertEXIF(blob, exif, function (newImage) {
showImage(new Blob([newImage], {
type: "image/jpeg"
}),
function (src) {
var img = new Image();
img.src = src;
document.body.appendChild(img);
});
});
});
});
}
});
}
function showImage(file, callback) {
var reader = new FileReader();
reader.onload = function () {
callback(reader.result);
}
reader.readAsDataURL(file);
}
function imageResize(img, width, height, quality, callback) {
var type = "image/jpeg";
var
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(callback, type, quality);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div>
<input type="file" id="filedom" />
<img src="#" width="200" id="img">
<br>
<button id="btn">获取</button>
</div>
</body>
</html>