我有一个上传按钮,我希望用户能够在单击“保存”之前预览图像。 我有
<input type="file" accept="image/*" id="avatarInput" onchange="PreviewImage();"/>
作为我的 HTML 和我的 JS:
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("avatarInput").files[0]);
oFReader.onload = function (oFREvent) {
$('.image').attr('src', oFREvent.target.result);
};
};
但是现在,当我尝试在手机上上传肖像图像时,预览图像会旋转 90 度。我该如何应对?我看过this和 this但我不知道代码可以合并到我的案例中。谢谢。
更新:
现在我有
function PreviewImage() {
var oFReader = new FileReader();
oFReader.onloadend = function () {
var showPicture = $('.mainavatar img');
var exif;
exif=EXIF.readFromBinaryFile(new BinaryFile(this.result));
console.log(exif);
$('.mainavatar img').attr('src', this.result);
};
oFReader.readAsBinaryString(document.getElementById("avatarInput").files[0]);
};
包含 exif.js 和 binary.js,但出现错误 Uncaught TypeError: First argument to DataView constructor must be an ArrayBuffer
最佳答案
我用 Canvas 来旋转。我不知道如何使用 exif.js,所以我使用了其他库。
可能还有一种使用 css 的方法。
function PreviewImage() {
var file = document.getElementById("avatarInput").files[0];
if (!file.type.match('image/jpeg.*')) {
// processing without jpeg
}
var reader = new FileReader();
reader.onload = function(e) {
var exif = piexif.load(e.target.result);
var image = new Image();
image.onload = function () {
var orientation = exif["0th"][piexif.ImageIFD.Orientation];
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
ctx.save();
if (orientation == 2) {
x = -canvas.width;
ctx.scale(-1, 1);
} else if (orientation == 3) {
x = -canvas.width;
y = -canvas.height;
ctx.scale(-1, -1);
} else if (orientation == 4) {
y = -canvas.height;
ctx.scale(1, -1);
} else if (orientation == 5) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
y = -canvas.width;
ctx.scale(1, -1);
} else if (orientation == 6) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
} else if (orientation == 7) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
x = -canvas.height;
ctx.scale(-1, 1);
} else if (orientation == 8) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
x = -canvas.height;
y = -canvas.width;
ctx.scale(-1, -1);
}
ctx.drawImage(image, x, y);
ctx.restore();
var dataURL = canvas.toDataURL("image/jpeg", 1.0);
$(".mainavatar img").attr("src", dataURL);
};
image.src = e.target.result;
};
reader.readAsDataURL(file);
}
关于javascript - 如何在使用 JavaScript 以正确的方向上传之前预览图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29752779/