JS 客户端 Exif 方向：旋转和镜像 JPEG 图像
github 项目JavaScript-Load-Image为 EXIF 方向问题提供了完整的解决方案，正确旋转/镜像所有 8 个 exif 方向的图像。参见javascript exif 方向的在线演示
图像被绘制到 HTML5 画布上。它的正确渲染是通过canvas操作在js/load-image-orientation.js中实现的。
希望这可以为其他人节省一些时间，并教搜索引擎了解这个开源 gem :)
Mederr 的上下文转换工作完美。如果您只需要提取方向，只需使用此功能- 您不需要任何 EXIF 读取库。下面是在 base64 图像中重新设置方向的函数。 这是一个小提琴。我还准备了一个方向提取演示的小提琴。
function resetOrientation(srcBase64, srcOrientation, callback) {
var img = new Image();
img.onload = function() {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
// set proper canvas dimensions before transform & export
if (4 < srcOrientation && srcOrientation < 9) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
// transform context before drawing image
switch (srcOrientation) {
case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
case 7: ctx.transform(0, -1, -1, 0, height, width); break;
case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
default: break;
}
// draw image
ctx.drawImage(img, 0, 0);
// export base64
callback(canvas.toDataURL());
};
img.src = srcBase64;
};
如果
width = img.width;
height = img.height;
var ctx = canvas.getContext('2d');
然后您可以使用这些转换将图像转换为方向 1
从方向：
ctx.transform(1, 0, 0, 1, 0, 0);ctx.transform(-1, 0, 0, 1, width, 0);ctx.transform(-1, 0, 0, -1, width, height);ctx.transform(1, 0, 0, -1, 0, height);ctx.transform(0, 1, 1, 0, 0, 0);ctx.transform(0, 1, -1, 0, height, 0);ctx.transform(0, -1, -1, 0, height, width);ctx.transform(0, -1, 1, 0, 0, width);
在ctx上绘制图像之前
好的，除了@user3096626 回答我认为如果有人提供代码示例会更有帮助，以下示例将向您展示如何修复来自 url（远程图像）的图像方向：
解决方案 1：使用 javascript（推荐）
因为load-image库不会仅从 url 图像（文件/blob）中提取 exif 标签，我们将同时使用exif-js和load-image javascript 库，因此首先将这些库添加到您的页面中，如下所示：
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.1.0/exif.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-scale.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-orientation.min.js"></script>注意exif-js 的 2.2 版本似乎有问题，所以我们使用 2.1
那么基本上我们要做的是
a - 使用加载图像
window.loadImage()b - 使用读取 exif 标签
window.EXIF.getData()c - 将图像转换为画布并使用固定图像方向
window.loadImage.scale()d - 将画布放入文档中
干得好 ：）
window.loadImage("/your-image.jpg", function (img) {
if (img.type === "error") {
console.log("couldn't load image:", img);
} else {
window.EXIF.getData(img, function () {
var orientation = EXIF.getTag(this, "Orientation");
var canvas = window.loadImage.scale(img, {orientation: orientation || 0, canvas: true});
document.getElementById("container").appendChild(canvas);
// or using jquery $("#container").append(canvas);
});
}
});
当然，您也可以从画布对象中获取 base64 格式的图像并将其放置在 img src 属性中，因此您可以使用 jQuery ;)
$("#my-image").attr("src",canvas.toDataURL());
这里是完整的代码：github：https : //github.com/digital-flowers/loadimage-exif-example
解决方案2：使用html（浏览器黑客）
有一个非常快速和简单的 hack，如果图像在没有任何 html 的新选项卡中直接打开，大多数浏览器会以正确的方向显示图像（哈哈，我不知道为什么），所以基本上你可以使用 iframe 显示你的图像通过将 iframe src 属性直接作为图像 url：
<iframe src="/my-image.jpg"></iframe>
解决方案 3：使用 css（仅 ios 上的 firefox 和 safari）
有 css3 属性可以修复图像方向，但它仅适用于 firefox 和 safari/ios 的问题仍然值得一提，因为很快它将可用于所有浏览器（来自caniuse 的浏览器支持信息）
img {
image-orientation: from-image;
}
对于那些拥有来自输入控件的文件，不知道它的方向是什么，有点懒惰并且不想在下面包含大型库的人来说，@WunderBart 提供的代码与他链接到的答案融合在一起（https://stackoverflow.com/a/32490603 ) 找到方向。
function getDataUrl(file, callback2) {
var callback = function (srcOrientation) {
var reader2 = new FileReader();
reader2.onload = function (e) {
var srcBase64 = e.target.result;
var img = new Image();
img.onload = function () {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
// set proper canvas dimensions before transform & export
if (4 < srcOrientation && srcOrientation < 9) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
// transform context before drawing image
switch (srcOrientation) {
case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
case 7: ctx.transform(0, -1, -1, 0, height, width); break;
case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
default: break;
}
// draw image
ctx.drawImage(img, 0, 0);
// export base64
callback2(canvas.toDataURL());
};
img.src = srcBase64;
}
reader2.readAsDataURL(file);
}
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);
}
可以很容易地像这样调用
getDataUrl(input.files[0], function (imgBase64) {
vm.user.BioPhoto = imgBase64;
});