Question

我正在尝试旋转使用Jcrop的图像。（原因是直接从相机拍摄的Iphone图片未使用exif信息显示）

因此，基本上使用this thread可以获得exif信息，然后尝试了几种旋转图像的方法，并完成了this one的使用，但没有任何效果。即使直接在调试器中应用旋转也无法正常工作。我最好的猜测是，Jcrop在图像周围的各处添加了div，从而使CSS不再有效，但是随着我从js / html / css开始，我不知道如何找到解决方案。

以下是我的html：

<form method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="imageInput" accept="image/*" capture="camera" />  
  <div id="im_container">
    <img id="image" src="#" alt="My Image" />
  </div>
</form>

还有我的js脚本：

var imWidth = 0;
var imHeight = 0;

function readURL(input) {
  if (input.files && input.files[0]) {
      getOrientation(input.files[0], function(orientation) {

      console.log('orientation ' + orientation);

      var reader = new FileReader();
      reader.onload = function(e) {
        console.log("Reader onload");

        var image = new Image();
        image.src = e.target.result;
        image.onload = function() {
          console.log("Image onload");
          imWidth = this.width;
          imHeight = this.height;

          $('#image').attr('src', this.src);
          console.log("Width: " + imWidth + " and Height: " + imHeight);
          var initx = parseInt(imWidth/2, 10);
          var inity = parseInt(imHeight/2, 10);
          var ratio = 1;
          var ratioInv = 1;
          if (imWidth <= imHeight) {
            console.log("Width < Height");
            $('#image').Jcrop({
              aspectRatio: ratioInv,
              onSelect: updateCoords,
              trueSize: [imWidth, imHeight],
              setSelect: [0, 0, initx, inity]
            });
          } else {
            console.log("Width > Height");
            $('#image').Jcrop({
              aspectRatio: ratio,
              onSelect: updateCoords,
              trueSize: [imWidth, imHeight],
              setSelect: [0, 0, initx, inity]
            });
          }

          // -1 because I am testing with an image having no exif orientation details
          if (orientation == -1) {
            // Turn image ?
            console.log("rotate image");
            img = document.getElementById('im_container');
            angle = 90;
            img.className = "rotate" + angle;
          }
        }
      }

      reader.readAsDataURL(input.files[0]);
      });
  }
}

$("#imageInput").change(function() {
  readURL(this);
});

getOrientation（）来自前面提到的this thread。

编辑：我的猜测是因为图像根本不遵守css施加的大小限制。在检查网页上的源代码时，我在图像和初始容器之间看到了很多div容器。

Javascript Jcrop和旋转

0 个答案: