相关疑难解决方法(0)

数码相机照片通常以JPEG格式保存,并带有EXIF"方向"标签.要正确显示,需要根据设置的方向旋转/镜像图像,但浏览器会忽略渲染图像的信息.即使在大型商业网络应用程序中,对EXIF方向的支持也可能不稳定1.相同的源代码还提供 了JPEG可以具有的8种不同方向的精彩摘要:

样本图像可在4处获得.

问题是如何在客户端旋转/镜像图像,以便正确显示并在必要时进一步处理？

有JS库可用于解析EXIF数据,包括orientation属性2.Flickr在解析大图像时注意到了可能的性能问题,需要使用Web工作者3.

控制台工具可以正确地重新定向图像5.解决问题的PHP脚本可在6处获得

我想知道PNG是否包含如下数据？

我所做的是将jpg文件转换为png格式,我期待检索我在jpg上的相同信息,如下所示:

目前使用这个as3库来读取数据.

• IDF0 --- IDF @ [134 - 248](9个条目)
  • 方向(简短):1
  • XResolution(RATIONAL):72/1
  • YResolution(RATIONAL):72/1
  • ResolutionUnit(简称):2
  • 软件(ASCIIx16):QuickTime 7.6.6
  • DateTime(ASCIIx20):2011:10:02 22:43:37
  • HostComputer(ASCIIx16):Mac OS X 10.6.8
  • Exif IFD(LONG):8 34853
  • GPS IFD(长期):248

• EXIF IDF --- IDF @ [8 - 134](10个条目)
  • ExifVersion(UNDEFINEDx4):0220
  • DateTimeOrigina(ASCIIx20):2011:04:14 17:22:01
  • UserComment(UNDEFINEDx63):ASCII
  • FlashpixVersion(UNDEFINEDx4):0100
  • ColorSpace(简称):1
  • PixelXDimension(LONG):1022
  • PixelYDimension(长):486
  • 未知(ASCIIx13):图像标签-LOL
  • SceneCaptureType(SHORT):0

• GPS IDF --- IDF @ [248 - 338](7个条目)
  • 互操作性指数(ASCIIx2):N
  • 互操作性版本(RATIONALx3)@ 425:52/1,1114/100,0/1
  • 未知(ASCIIx2):W
  • 未知(RATIONALx3):1/1,4392/100,0/1
  • 未知(RATIONAL):5/1
  • 未知(ASCIIx2):T
  • 未知(RATIONAL):3694/117

TL; DR;

有没有办法在上传之前直接在浏览器端压缩图像(主要是jpeg,png和gif)？我很确定JavaScript可以做到这一点,但我找不到实现它的方法.

这是我想要实现的完整场景:

• 用户访问我的网站,并通过input type="file"元素选择图像,
• 这个图像是通过JavaScript检索的,我们做了一些验证,如正确的文件格式,最大文件大小等,
• 如果一切正常,页面上会显示图像的预览,
• 用户可以进行一些基本操作,例如将图像旋转90°/ -90°,按照预定义的比例裁剪等,或者用户可以上传另一张图像并返回步骤1,
• 当用户满意时,编辑后的图像会被压缩并在本地"保存"(不保存到文件中,但在浏览器内存/页面中), -
• 用户填写表格,其中包含姓名,年龄等数据,
• 用户单击"完成"按钮,然后将包含数据+压缩图像的表单发送到服务器(不带AJAX),

直到最后一步的完整过程应该在客户端完成,并且应该与最新的Chrome和Firefox,Safari 5+和IE 8+兼容.如果可能,只应使用JavaScript(但我很确定这是不可能的).

我现在没有编码任何东西,但我已经考虑过了.可以通过File API在本地读取文件,可以使用Canvas元素完成图像预览和编辑,但是我找不到一种方法来执行图像压缩部分.

根据html5please.com和caniuse.com,支持这些浏览器非常困难(感谢IE),但可以使用FlashFanvas和FileReader之类的polyfill来完成.

实际上,目标是减小文件大小,因此我将图像压缩视为一种解决方案.但是,我知道上传的图像将在我的网站上显示,每次都在同一个地方,我知道这个显示区域的尺寸(例如200x400).因此,我可以调整图像大小以适应这些尺寸,从而减小文件大小.我不知道这种技术的压缩率是多少.

你怎么看 ？你有什么建议告诉我吗？你知道在JavaScript中压缩浏览器图像的方法吗？谢谢你的回复.

可能重复:
在客户端的Javascript中访问JPEG EXIF旋转数据

我需要使用Javascript从HTML JPEG图像中提取方向EXIF数据.

根据exiftool的文档,方向标志位于EXIF标记内的偏移量0x112处,占用2个字节.

我想我们只需要以良好的偏移量提取数据并"转换"该值,但我不知道如何在浏览器中实现这一点.结果值应该是1到8之间的数字,用于描述方向.

如何从简单的IMG标签中读取数据？我需要一个仅限webkit的解决方案,但仅限浏览器.

谢谢 !

可以合并到JPEG文件中的元数据量(EXIF等)的理论最大值是多少？我想分配一个缓冲区,确保足以保存任何JPEG图像的元数据,而无需自己解析它.

我开发了一个 Laravel Web 应用程序，它具有接受用户上传的图像然后显示它的功能。我在测试时遇到了一个问题，因为使用手机上传的照片逆时针方向旋转了 90 度，我使用图像干预来解决这个问题。但是当我使用 javascript 向用户显示上传图像的预览时，图像旋转了 90 度，但是当我保存图像时它变得正确。我的 javascript 代码是

    function imagePreview(input,elm) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(elm).css("background-image","url('"+e.target.result+"')");
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#settings_img").on("change",function(){
        imagePreview(this,"#settings_img_elm");
    });

任何人都可以通过编辑上面的代码来帮助我正确定位预览图像，以便在需要时更改图像的方向。

来自Docs

ImageData接口表示canvas元素区域的基础像素数据

我想知道ImageData只有像素数据或像素数据+元数据吗？元数据表示任何EXIF数据,如方向,分辨率,文件类型或dpi.

问题

每当我使用除了1之外的EXIF Orientation绘制图像并将其作为ImageData读回时,当我将ImageData转换为DataURL时,结果ImageData在Image标签上没有正确对齐.

在移动设备和桌面浏览器中都观察到所有浏览器都存在问题.

上传之前，我在查看图片时看到了很多帖子。一篇文章使用FileReader实现了一种非常简单的方法：

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#preview_image').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}  

$("#image_input").change(function(){
    readURL(this);
});

但是问题是图像旋转加载！那么我是否缺少一种缺少的财产？或FileReader不够成熟，无法理解图像的布局。不知道！

也许我应该使用其他方法！任何有关此问题的想法将不胜感激。

谢谢

我正在完全按照这个答案的结果,但我收到以下错误:

ReferenceError:未定义BinaryFile

这是使用它的代码:

fr.onloadend = function() {
            console.log(this);
            exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
        }

该console.log节目有数据在那里,我只是不明白这个错误我收到.

谢谢您的帮助.

我正在使用 Jimp ( https://www.npmjs.com/package/jimp ) 库来裁剪图像。

裁剪工作正常，但我只遇到图像方向问题。

有时，用户上传旋转图像，其结果是旋转裁剪图像。

我浏览了https://www.npmjs.com/package/jimp文档，但找不到与此相关的任何内容。

以下是我浏览过但没有帮助的几个链接：

https://justmarkup.com/articles/2019-10-21-image-orientation/

在客户端的 JavaScript 中访问 JPEG EXIF 旋转数据

请帮忙

我正在创建一个Web应用程序,它允许直接在画布上上传图像.有时,当从iPad或其他此类设备上传图像时,它们的方向不同.

我试图找到一种方法来提取他们的方向信息,并相应地在画布中旋转图像.

我试过的事情:

• 我试过提取EXIF信息:

  dataUrl = canvas.toDataURL('image/jpeg');
  var bin = atob(dataUrl.split(',')[1]);
  var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
  alert(exif.Orientation);
  

  Run Code Online (Sandbox Code Playgroud)

但它回来了undefined.

参考.这个答案.

• 我发现这个小提琴 -

  它读取Base-64 PNG文件并返回图像的宽度和高度,但我不知道如何使用此方法查找图像的方向.

参考.这个答案

谁能指点我正确的方向？任何帮助深表感谢.

我在页面上有一个文件输入控件来选择图像.当用户选择图像时,我在页面上显示图像.

但我的问题是,当用户选择垂直或纵向图像时,它以横向模式显示.

那么,我如何检测图像方向并应用适当的CSS以在横向或纵向视图中显示.

我从以下代码开始，该代码允许用户在浏览器中预览上传的图像：

'use strict';
var img = document.querySelector('img');
var span = document.querySelector('span');
document.querySelector('input').addEventListener('change', function(event){
  log('File changed', true);
  var file = event.target.files[0];
  if(file === undefined){
    img.parentElement.style.display = 'none';
    log('No file selected');
    return;
  }
  showImage(file);
});
function log(data, clear){
  if(clear){
    span.innerHTML = '';
  }
  span.innerHTML += '<br>' + data;
}
function showImage(file) {
  log('showImage()');
  if(!window.FileReader){
    return log('FileReader is not supported');
  }
  if(!window.FileReader.prototype.readAsDataURL){
    return log('readAsDataURL is not supported');
  }
  var reader = new FileReader();
  reader.onload = function(event){
    img.src = event.target.result;
    img.parentElement.style.display = …