如何在角度上固定照片方向

问题描述

我无法在我的角度/节点应用程序中获取正确的照片方向.

I'm having trouble getting photos to orient the correct way in my angular/node app.

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

My app is set up so that I use ng2-file-upload to send the file from the angular app to the server where multer and multer-s3 saves that photo in AWS S3. I then save the filename in my postgres database and use it to call the photo by url.

我的问题是，照片​​是由iPhone上传的(可能是其他我只尝试使用iphone的照片)，并返回到左侧旋转了.

My issue is, is the photo is uploaded by the iPhone (could be others I only tried iphone) and is returned rotated to the left.

我在服务器端研究了对我不起作用的其他选项.其中包括库fix-orientation和jpeg-autorotate.

Ive looked into different options on the server side that have not worked for me. This includes the libraries fix-orientation and jpeg-autorotate.

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

Does anyone have a solution they've implemented on the client-side in Angular2+ ?

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

Here is my image-upload code on the server side

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;

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

And here is my code on the angular app

  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;
  }

推荐答案

通过以角度读取Exif数据来解决图像方向问题.

安装exif-js

Fix your image orientation issue by reading Exif data in angular.

Install exif-js

npm i exif-js --save

将EXIF导入您的组件

Import EXIF to your component

import * as EXIF from 'exif-js';

setImgOrientation方法具有文件 参数，该参数是上传的文件对象， inputBase64String 将相同文件的 base64 字符串

setImgOrientation methos has file param which is uploaded file object,inputBase64String will base64 string of that same file

setImgOrientation(file, inputBase64String) {
 return new Promise((resolve, reject) => {
  const that = this;
  EXIF.getData(file, function () {
    if (this && this.exifdata && this.exifdata.Orientation) {
      that.resetOrientation(inputBase64String, this.exifdata.Orientation, function
     (resetBase64Image) {
        inputBase64String = resetBase64Image;
        resolve(inputBase64String);
      });
    } else {
      resolve(inputBase64String);
    }
    });
   });
  }

  resetOrientation(srcBase64, srcOrientation, callback) {
  const img = new Image();

  img.onload = function () {
  const 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;
}

这篇关于如何在角度上固定照片方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！