將圖像上傳到服務器上之前旋轉圖像

我在上傳圖像時遇到了一些問題。有時，某人以錯誤的方向上傳照片。 Whant我想要做的是在將圖像發送到我的服務器之前旋轉圖像。這可能嗎？將圖像上傳到服務器上之前旋轉圖像

我知道我可以使用功能imagerotate()從php但我可以在圖像上傳後使用它。

有沒有什麼辦法通過JavaScript（或JQuery）旋轉圖像，然後通過PHP傳遞信息到服務器？

現在我做了這樣的事情：

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+'">'); 
    }; 
}); 
});

乙ut我不能轉移'旋轉'上傳文件，我想....

非常感謝！

來源

2015-04-22 Lorenzo Belfanti

JavaScript旋轉改變視圖不是真實的圖像。 –

您需要在畫布上繪製圖像，旋轉畫布，然後從畫布上讀取數據以獲取旋轉後的圖像 –

您能否向我展示一個快速示例？謝謝！除了畫布以外沒有其他方法嗎？因爲舊版瀏覽器不支持HTML 5 –

這是我採取的方法：

允許用戶在瀏覽器中旋轉圖像。在他們這樣做時，將隱藏輸入字段的值設置爲旋轉角度。

然後當圖像發佈到PHP時，您可以讀取旋轉字段並處理圖像。

來源

2017-07-07 14:11:31

其實，在距離年是我所做的 –

將圖像上傳到服務器上之前旋轉圖像

回答

相關問題