相关疑难解决方法(0)

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

样本图像可在4处获得.

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

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

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

我有一个上传按钮，我希望用户能够在单击“保存”之前预览图像。我有

<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 度。我该如何应对？我已经看到了这个和这个，但我不知道这些代码可以包含在我的案例中。谢谢。

更新：

我现在有

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 …

我有以下代码可以上传图像并使用 System.Drawing.Graphics 以 150 x 200 div 的大小绘制它，但是当图像是从 IOS 设备获取时，图片会向右旋转 90 度。

仅供参考：我在 JavaScript 画布中绘制图像时遇到了同样的问题，这个解决方案对我有用。因此我在 C# 中寻找等效的解决方案

     private System.Drawing.Image ResizeAndDraw(System.Drawing.Image objTempImage)
            {
                Size objSize = new Size(150, 200);
                Bitmap objBmp;
                objBmp = new Bitmap(objSize.Width, objSize.Height);

                Graphics g = Graphics.FromImage(objBmp);
                g.SmoothingMode = SmoothingMode.HighQuality;
                g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                g.PixelOffsetMode = PixelOffsetMode.HighQuality;
                //Rectangle rect = new Rectangle(x, y, thumbSize.Width, thumbSize.Height);
                Rectangle rect = new Rectangle(0,0,150,200);
                //g.DrawImage(objTempImage, rect, 0, 0, objTempImage.Width, objTempImage.Height, GraphicsUnit.Pixel);
                g.DrawImage(objTempImage, rect);
                return objBmp;
            }