我正在尝试根据原始旋转来旋转照片,这是由相机在EXIF图像数据中设置的。诀窍是所有这一切都应该在浏览器中进行,使用JavaScript和HTML5“画布”。
目前,我可以获得图像的旋转效果,但如果图像被反转或翻转,则无法旋转图像。
JS代码 ..
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return callback(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
}
canvasCtx = document.getElementById("panel").getContext("2d");
document.getElementById("ifile").onchange = function(event) {
getOrientation(document.getElementById("ifile").files[0], function(orientation) {
alert('orientation: ' + orientation);
});
this.imageFile = event.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
//img.style.width = "300px";
//img.style.height = "300px";
img.onload = function() {
drawImage(img);
}
img.src = event.target.result;
}
reader.readAsDataURL(this.imageFile);
}
drawImage = function(img) {
this.canvasCtx.canvas.width = 300;//img.width;
this.canvasCtx.canvas.height = 300;//img.height;
if(img.width>img.height){ //Landscape Image
canvasCtx.width = 300;
canvasCtx.height = 300 / img.width * img.height;
} else { //Portrait Image
canvasCtx.width = 300 / img.height * img.width;
canvasCtx.height = 300;
}
canvasCtx.translate(img.width * 0.5, img.height * 0.5);
/// rotate canvas context
canvasCtx.rotate(0.5 * Math.PI); /// 90deg clock-wise
/// translate back so next draw op happens in upper left corner
canvasCtx.translate(-img.width * 0.5, -img.height * 0.5);
this.canvasCtx.drawImage(img,0,0,canvasCtx.width, canvasCtx.height);
url = canvasCtx.canvas.toDataURL();
}
我有两张ios拍摄的照片,android分别为3和6。我想将他们的方向改为1.无法想象如何做到这一点。请帮助..