Question

我正在开发专门针对移动设备的Web应用程序。应用程序使用相机捕获图像并将其存储在数据库中。对于Android，我正在使用getUserMedia API，对于iOS，我正在使用html input标签打开相机。最初，它是在某些设备上自动旋转图像，例如三星和索尼。我使用了HTML5 canvas旋转方法，它解决了所有其他设备的旋转问题，但在Samsung上，它仍在旋转。

这是我的代码。

uploadToDB(file) {
  let that = this;
  EXIF.getData(file, function() {
    var orientation = EXIF.getTag(this, "Orientation");
    var can = document.createElement("canvas");
    var ctx = can.getContext("2d");
    var thisImage = new Image();
    thisImage.onload = function() {
      can.width = thisImage.width;
      can.height = thisImage.height;
      ctx.save();
      var width = can.width;
      var styleWidth = can.style.width;
      var height = can.height;
      var styleHeight = can.style.height;
      if (orientation) {
        if (orientation > 4) {
          can.width = height;
          can.style.width = styleHeight;
          can.height = width;
          can.style.height = styleWidth;
        }
        switch (orientation) {
          case 2:
            ctx.translate(width, 0);
            ctx.scale(-1, 1);
            break;
          case 3:
            ctx.translate(width, height);
            ctx.rotate(Math.PI);
            break;
          case 4:
            ctx.translate(0, height);
            ctx.scale(1, -1);
            break;
          case 5:
            ctx.rotate(0.5 * Math.PI);
            ctx.scale(1, -1);
            break;
          case 6:
            ctx.rotate(0.5 * Math.PI);
            ctx.translate(0, -height);
            break;
          case 7:
            ctx.rotate(0.5 * Math.PI);
            ctx.translate(width, -height);
            ctx.scale(-1, 1);
            break;
          case 8:
            ctx.rotate(-0.5 * Math.PI);
            ctx.translate(-width, 0);
            break;
        }
      }

      ctx.drawImage(thisImage, 0, 0);
      ctx.restore();
      var dataURL = can.toDataURL();
      let currentDate = new Date().getTime();
      let fileName = "taskcam" + currentDate;
      let mimeType = "image/jpeg";
      that.counter = that.counter + 1;
      that.base64toFile(dataURL, fileName, mimeType).then(file => {
        database.fileUpload(file);
      });
      that.capturedImg = dataURL;
    };

    thisImage.src = URL.createObjectURL(file);
  });
}

此方法获取图像文件并旋转它。它解决了Sony和其他一些设备上的问题，但没有解决三星上的问题。

链接到该应用程序： https://blah-f88bf.firebaseapp.com/

捕获的图像会在Samsung设备（Web应用程序）上自动旋转

0 个答案: