在上传图像到服务器之前旋转图像。

Question

我在上传图片时遇到了一点问题。有时，有人会以错误的方向上传照片。我想要做的是在将图像发送到服务器之前旋转图像。这可能吗？

我知道可以使用php的imagerotate()函数，但我只能在上传图像后使用它。

是否有通过javascript（或Jquery）旋转图像，然后通过php将信息传递给服务器的方法？

现在我做了这样的事情：

我使用jQueryRotate.js

HTML

<form method="POST" enctype="multipart/form-data">
<input type="file" id="file" name="file">
<div id="preview"></div>
<br>
<a href="#" id="counter" class="row"><- counter</a>
    <select id="degree">
        <option>90</option>
    </select>
<a href="#" id="clockwise" class="row">clockwise -></a>
<hr>
<button type="submit">save image</button>
</form>

Jquery

$(document).ready(function() {
$('.row').click(function(){
    var a = $('img').getRotateAngle();
    var d = Math.abs($('#degree').val());
    if($(this).attr('id') == 'counter'){
       //d = -Math.abs(+a - +d);
        d = a - d;
    }
    else{d = +a + +d;}

    $('img').rotate({animateTo:d});
});

/* image preview */
$('#file').change(function(){
    var oFReader = new FileReader();
    oFReader.readAsDataURL(this.files[0]);
    console.log(this.files[0]);
    oFReader.onload = function (oFREvent) {
        $('#preview').html('<img src="'+oFREvent.target.result+'">');
    };
});
});

但是我无法将“旋转”传输到上传文件中，我想……非常感谢！

- Lorenzo Belfanti

---

JavaScript旋转改变的是视图而不是真实图像。 - Kuldeep Dangi

需要在画布上绘制图像，旋转画布，然后从画布读取数据以获取旋转后的图像。 - Vigneswaran Marimuthu

你能给我展示一个快速的例子吗？谢谢！除了Canvas，没有其他的方法吗？因为旧版浏览器不支持HTML5。 - Lorenzo Belfanti

这应该能满足你的需求：http://stackoverflow.com/questions/38734035/php-rotate-image-from-request-file/40330390#40330390 - HoldOffHunger

Answer 1

这是我所采取的方法：

允许用户在浏览器中旋转图片。当他们这样做时，将一个隐藏输入字段的值设置为旋转角度。

然后当图片被提交到PHP时，您可以读取旋转字段并处理图片。

- Enigma Plus

---

实际上，几年前我所做的事情是... - Lorenzo Belfanti

Answer 2

要在Javascript中旋转图像，您可以使用此简单函数。只需使用一个旋转按钮（而不是旋转右和旋转左两个按钮），此函数将循环四个选项。

function rotatePreview() {
  var img = document.getElementById('preview-photo');
  var currentrotate = img.style.transform;
  var newrotate = '';
  var rotatevalue = 0;

  switch(currentrotate){
    case '':
      newrotate = 'rotate(90deg)';
      rotatevalue = 90;
      break;
    case 'rotate(90deg)':
      newrotate = 'rotate(180deg)';
      rotatevalue = 180;
      break;
    case 'rotate(180deg)':
      newrotate = 'rotate(270deg)';
      rotatevalue = 270;
      break;
    case 'rotate(270deg)':
      newrotate = '';
      rotatevalue = 0;
      break;
  }

  img.style.transform = newrotate;
  document.getElementById("rotatevalue").value = rotatevalue;
}

这个函数将图像旋转90度，比当前的旋转更进一步，并且将新的旋转值保存在隐藏输入中，您可以将其提交到PHP中，在服务器上保存图像之前以相同的量旋转图像。

- Vincent