JS客户端Exif方向:旋转和镜像JPEG图像
JS客户端Exif方向:旋转和镜像JPEG图像
提问于 2013-12-16 06:41:22
回答 14
Stack Overflow用户
回答已采纳
发布于 2013-12-16 06:41:22
github项目JavaScript-Load-Image为EXIF方向问题提供了一个完整的解决方案，可以正确地旋转/镜像所有8个exif方向的图像。查看javascript exif orientation的在线演示
图像被绘制到HTML5画布上。它的正确渲染是通过画布操作在js/load-image-orientation.js中实现的。
希望这能为其他人节省一些时间，并让搜索引擎了解这个开源的gem :)
Stack Overflow用户
发布于 2016-11-29 21:49:39
Mederr's context transform可以完美地工作。如果您只需要提取方向，请使用this function -您不需要任何读取EXIF的库。下面是在base64图像中重新设置方向的函数。Here's a fiddle for it。我还准备了一个fiddle with orientation extraction demo。
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;
};Stack Overflow用户
发布于 2015-07-07 23:36:58
如果
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上绘制图像之前
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20600800
复制相关文章
相似问题
腾讯云开发者
