如何修复照片方向的角度

2024-01-12

我无法让照片在我的角度/节点应用程序中以正确的方式定向。

我的应用程序已设置为使用 ng2-file-upload 将文件从 Angular 应用程序发送到服务器,其中 multer 和 multer-s3 将该照片保存在 AWS S3 中。然后,我将文件名保存在 postgres 数据库中,并使用它通过 url 调用照片。

我的问题是,照片​​是由 iPhone 上传的(可能是其他我只尝试过 iPhone 的照片),然后返回时旋转到左侧。

我已经研究了服务器端的不同选项,但这些选项对我不起作用。这包括库 fix-orientation 和 jpeg-autorotate。

有没有人有在 Angular2+ 客户端实现的解决方案?

这是我在服务器端的图像上传代码

aws.config.loadFromPath(path3);
var s3 = new aws.S3();
var fileName = '';
var uploadM = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'XXX',
    acl: 'public-read',
    metadata: function (req, file, cb) {
      console.log(file);
      console.log(req.file);
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      fileName = Date.now().toString() + "-" + (Math.round(Math.random() * 10000000000000000)).toString() + '-' + file.originalname;
      cb(null, fileName)
    }
  })
});

router.post('/upload', uploadM.array('photo', 3), function(req,res) {
    if (res.error) {
      return res.status(400).json({
        message: "Error",
        error: res.error
      });
    }
    return res.status(200).send(fileName);

});


module.exports = router;

这是我在角度应用程序上的代码

  public uploader:FileUploader = new FileUploader({url: this.devUrl, itemAlias: 'photo'});

  constructor(
    private userS: UserService,
    private authS: MyAuthService,
    private router: Router,
    private itemS: ItemService,
    private uis: UiService) {}

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file)=> { file.withCredentials = false; };

    this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
      this.awsUrls.push('AWSURL' + response);
      this.filesUploaded = true;
      this.uploaderLoading = false;
    };

  }

  addItem() {
    this.uploaderLoading = true;
    this.itemS.onNewItem(this.awsUrls)
      .subscribe(data => {
        this.uis.onFlash('Posted Successfully. Add Details!', 'success');
        this.itemS.onSetUpdateItemId(data.id, false);
        this.uploaderLoading = false;
        this.onPhotoAdded();
      }, resp => {
        this.uploaderLoading = false;
        this.uis.onFlash('Error Posting', 'error');
        console.log(resp);
      });
  }

  onUploadClicked() {
    this.uploader.uploadAll();
    this.uploaderLoading = true;
  }

在我看来,理想的解决方案是在将图像发送到 S3 之前对其进行旋转,以便仅执行一次(而不是每次用户查看图像时)。

你可以使用这个图书馆 https://www.npmjs.com/package/jpeg-autorotate在上传到 S3 之前确保图像方向正确。

Look at 这个样本 https://www.npmjs.com/package/jpeg-autorotate#sample-usage,它可以轻松地集成到您的代码中,而无需花费太多精力。

Regards,

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何修复照片方向的角度 的相关文章

随机推荐

  • Mysql XML表导出命令行

    也许我在这里没有看到什么 但是为什么这个命令行在 LINUX 命令行上运行时工作得很好并提供结果集 但在 WINDOWS 命令 行上执行时它会失败并没有返回任何内容 mysql hHOSTNAME uroot p xml e SELECT
  • Python:连接多个组件来构建 URL

    我正在尝试通过加入一些动态组件来构建 URL 我想用类似的东西os path join 但对于我来说的 URL 来说 通过研究我发现urlparse urljoin 做同样的事情 然而 看起来一次只需要两个参数 到目前为止 我有以下有效但看
  • 学习卡布奇诺

    学习卡布奇诺的最佳来源是什么 我从事 传统 网络开发 但我对这个新框架非常感兴趣 请注意 我对 Objective C 毫无了解 如上所述 该网站是一个好地方 但还有一些其他好的资源 http cappuccinocasts com htt
  • 尽管环境变量设置正确,但 Android Studio 中“未找到 SDK 位置”

    我有点困惑为什么在实际设置 ANDROID HOME 环境变量时收到此消息 It is also set in project defaults 我可能在这里遗漏了一些微不足道的东西 但不确定是什么 谢谢 面临着同样的问题Intellij
  • BigQuery:通过 Java API 进行流式插入时出现错误 500

    我正在尝试使用以下示例代码插入一行 https developers google com bigquery streaming data into bigquery streaminginsertexamples https develo
  • 如何访问 Silverlight 4 中 App.xaml.cs 中创建的自定义属性

    我在 app xaml cs 文件中创建了自己的自定义属性 我需要在我的视图模型之一中访问此属性 当我尝试通过应用程序对象访问时 它不会显示 谁能帮我这个 Regards Use Application Current访问您创建的自定义属性
  • 如果大数组包含较小数组中的值,则查找大数组的索引

    有没有快的numpy用于返回较大数组中的索引列表的函数 其中它与较小数组中的值相匹配 较小的数组约为 30M 值 较大的数组为 800M 所以我想避免 for 循环numpy where calls searchsorted 的问题是 即使
  • 如何使用 numpy 创建单位矩阵

    我如何创建一个身份matrix与numpy 有没有比以下更简单的语法 numpy matrix numpy identity n 这是一个更简单的语法 np matlib identity n 这是一个更简单的语法 运行速度更快 In 1
  • MySQL 中出现 ERROR 1701、ERROR 1452 和 ERROR 1305 错误 - 需要一些专业知识

    这是我第一次真正尝试用第三范式创建数据库 我成功地创建了 DDL 脚本 在继续构建脚本之前 我已将逻辑模型验证为 3NF 但我遇到了很多错误 我不确定是否可以修复 对于这个特殊的情况 我可能已经咬了一口 但我不想放弃 这对我来说是一个很大的
  • 如何在 Create React App 中不显示警告

    我正在使用 Facebook 的 create react app 当它通过 npm start 启动时 它会向我显示警告列表 例如 Bla 已定义但从未使用预期为 但看到了 我不想看到任何这些警告 有办法抑制它们吗 对于本地 Eslint
  • 如何在不使用子进程的情况下从 python 自动脚本中运行 python 'sdist' 命令?

    我正在编写一个脚本来自动打包 自制 python 模块并将其分发到远程计算机上 我正在使用 Pip 并创建了一个 setup py 文件 但随后我必须调用子进程模块来调用 python setup py sdist 命令 我已经查看了 di
  • 如何向 .net 控制台应用程序添加字体颜色?

    有没有办法为 net 中的控制台应用程序中的某些行的字体着色 Thanks Console BackgroundColor ConsoleColor Blue Console ForegroundColor ConsoleColor Yel
  • 如何在 d3 方法链中有效地将数据从字符串转换为 int?

    我正在 d3 中制作交互式条形图 并且遇到了问题 条形图从表单读取数据 但它以字符串形式读取数据 当我使用数据来绘制这样的条形时 var bars svg selectAll rect data dataset enter append r
  • 使用已安装的 openresty 安装resty.http

    我安装了 openresty 1 13 6 1 但它缺少 resty http 模块 我的 openresty 安装在 usr local openresty 中 我需要将 Resty http 模块与其集成 怎么做 只需复制两个文件 ht
  • MVC 5:我应该从 IdentityUser 类继承我的 User 吗?

    我试图学习 Asp Net Identity 和 在这个tutorial http blogs msdn com b webdev archive 2013 10 20 building a simple todo application
  • Haskell 中的“模式匹配”类型

    我想要一个功能f作为增量Ints 并作为所有其他类型的标识 我尝试启用TypeApplications扩展并以最直接的方式执行此操作 f forall a a gt a f Int x x 1 f x x 但扩展不启用此类模式
  • MySQL删除后自动递增

    我有一个 MySQL 表 其主键字段启用了 AUTO INCRMENT 阅读这里的其他帖子后 我注意到人们有同样的问题并且有不同的答案 有些人建议不要使用此功能 另一些人则表示它无法 修复 I have table course field
  • 使用打字稿时对象中未定义的属性

    我想将对象的每个属性作为执行查询的结果 UserBody export interface UserBody empno string password string class string user id string deptcd s
  • import _socket:“导入错误:DLL 加载失败”

    我昨天尝试安装 Django 和 pymc 遇到很多问题后 我决定重新安装 Python 2 7 我已经这样做了 但现在导入几乎所有东西都遇到问题 我得到了一堆行 最后一行是 File c python27 lib httplib py l
  • 如何修复照片方向的角度

    我无法让照片在我的角度 节点应用程序中以正确的方式定向 我的应用程序已设置为使用 ng2 file upload 将文件从 Angular 应用程序发送到服务器 其中 multer 和 multer s3 将该照片保存在 AWS S3 中