使用readAsDataURL检索原始图像时的图像方向

我找不到使用FileReader.readAsDataURL的任何示例，并在容器中以右侧图像方向显示结果图像。使用readAsDataURL检索原始图像时的图像方向

所有从我的相机和iPhone设备传来的肖像图片有这个问题。只有用adobe photoshop保存的人像照片似乎没有这个问题。

下面是我在网上找到了示例系统之一。上传这张照片，它在横向模式下的加载时 http://www.onlywebpro.com/demo/file_reader/reader01.html

注意：http://www.rafaelsanches.com/IMG_3786.JPG

注意，像使用浏览器下载它，当实际上显示在景观我的代码非常相似。当您将其保存到磁盘并用取景器打开时，它将以纵向进行预览。（可能取景器是巧妙使用EXIF信息）

使用exif.js我已发现，示例图像具有角度= 8。使用photoshop保存的照片的Orientation = 1。

现在，你们怎么认为，我去呢？我应该将它绘制在画布上并根据exif信息进行旋转吗？有人有关于这个好教程？有没有人遇到过这个问题？

来源

2012-03-05 Rafael Sanches

目前我不得不在网页上创建一个旋转工具。用户必须手动旋转。我相信可以读取exif旋转，然后自动旋转，但用exif.js处理10mb jpg非常慢，所以我暂时不考虑。 – 2012-03-14 22:48:17

我其实是有这个问题今天解决它...

从那里创建图像的例子线后...

这是我做了什么

var image = $(".uploaded"); 
       var img = new Image(); 

       img.src = e.target.result; 

       if (img.complete) { // was cached 
        if (img.height < img.width) { 
         $(image).addClass("landscape").removeClass("portrait"); 

        } 
        else { 
         $(image).addClass("portrait").removeClass("landscape"); 
        } 


       } 
       else { // wait for decoding 
        img.onload = function() { 
         if (img.height < img.width) { 
          $(image).addClass("landscape").removeClass("portrait"); 

         } 
         else { 
          $(image).addClass("portrait").removeClass("landscape"); 
         } 
        } 
       }

来源

2017-11-16 21:50:40

使用readAsDataURL检索原始图像时的图像方向

回答

相关问题