-
慕斯709654
github项目JavaScript-Load-Image为EXIF方向问题提供了一个完整的解决方案，正确旋转/镜像所有8个exif方向的图像。查看javascript exif方向的在线演示图像被绘制到HTML5画布上。它的正确渲染是通过canvas操作在js / load-image-orientation.js中实现的。希望这能节省一些时间，并教导搜索引擎关于这个开源宝石:)
-
ibeautiful
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上绘制图像之前