Question

我有这个HTML代码，允许用户在我的混合iOS应用上上传图片：

<input type="file" accept="image/*">

选择后，Web视图会为用户提供2个选项。 1.拍摄新照片2.选择现有照片。

当用户选择＆＃39;选择现有图片＆＃39;一切正常。但是，如果用户选择“拍摄新照片”，则在上传到Firebase Storage时，会以某种方式上传到横向。

我该如何解决这个问题？这不是理想的，但是有一种方法可以只允许现有的图片＆＃39;选项？

以下是处理图片并在<img>中显示的代码。

function fileUploaded(files) {

  var file = files[0];
  var reader = new FileReader();

  reader.onload = function (e) {

    var img = document.createElement("img");
    img.src = e.target.result;

    img.onload = function () {

      var canvas = document.createElement("canvas");

      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      canvas.width = 200;
      canvas.height = 200;
      var xStart = 0;
      var yStart = 0;
      var newHeight = 0;
      var newWidth = 0;
      var aspectRadio = img.height / img.width;

      if (img.height < img.width) {
        //horizontal
        aspectRadio = img.width / img.height;
        newHeight = 200;
        newWidth = aspectRadio * 200;
        xStart = -(newWidth - 200) / 2;
      } else {
        //vertical
        newWidth = 200;
        newHeight = aspectRadio * 200;
        yStart = -(newHeight - 200) / 2;
      }


      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, xStart, yStart, newWidth, newHeight);

      dataurl = canvas.toDataURL(file.type);
      document.getElementById('img_element').src = dataurl;


    }

  }
  reader.readAsDataURL(file);

}

Answer 1

您是否在上传前显示图片？您可能希望这样做以查看它是否已由iOS轮换（类似问题here）。至于修复，this可能是你想要使用的。

编辑：
我之前的回答有些模糊。更准确地说，您对EXIF方向有疑问。 Here是一个JSFiddle，它会向您显示图片的方向以及它看起来像<img/>与<canvas>的对比。之前提到的修复程序仍然是您可能想要采用的路径。您应该能够使用该库在<canvas>中正确定位图像。 Here是正在使用的库的示例。希望这有帮助！

iOS上的图片是侧面的（使用HTML输入）

1 个答案: