使用JavaScript通過瀏覽器裁剪圖像客戶端

Question

是否可以通過帶有JavaScript的瀏覽器在前端裁剪圖像？

我可以將圖像連同尺寸和座標一起發送到具有後端裁剪圖像的服務器。

我想要做的是用JavaScript通過瀏覽器裁剪圖像，然後如果需要的話，將裁剪後的圖像發送到服務器。

Answer 1

您可以通過圖像加載到一個Canvas元素，然後操縱畫布

基本這裏的教程做

http://www.w3schools.com/html/html5_canvas.asp

（還有更多可用）

Answer 2

您可以使用該圖像作爲元素的背景，然後使用background-position: Zpx Ypx;根據需要定位圖像。

它不會被裁剪，但它看起來像它。

Answer 3

你可以嘗試從

http://www.codeforest.net/html5-image-upload-resize-and-crop

function resizeAndUpload(file) { 
var reader = new FileReader(); 
    reader.onloadend = function() { 

    var tempImg = new Image(); 
    tempImg.src = reader.result; 
    tempImg.onload = function() { 

     var MAX_WIDTH = 400; 
     var MAX_HEIGHT = 300; 
     var tempW = tempImg.width; 
     var tempH = tempImg.height; 
     if (tempW > tempH) { 
      if (tempW > MAX_WIDTH) { 
       tempH *= MAX_WIDTH/tempW; 
       tempW = MAX_WIDTH; 
      } 
     } else { 
      if (tempH > MAX_HEIGHT) { 
       tempW *= MAX_HEIGHT/tempH; 
       tempH = MAX_HEIGHT; 
      } 
     } 

     var canvas = document.createElement('canvas'); 
     canvas.width = tempW; 
     canvas.height = tempH; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0, tempW, tempH); 
     var dataURL = canvas.toDataURL("image/jpeg"); 

     var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(ev){ 
      document.getElementById('filesInfo').innerHTML = 'Done!'; 
     }; 

     xhr.open('POST', 'uploadResized.php', true); 
     xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     var data = 'image=' + dataURL; 
     xhr.send(data); 
     } 

    } 
    reader.readAsDataURL(file); 
} 

此代碼僅適用於客戶端的大小調整大小。爲了裁剪，你可以使用像Jcrop這樣的東西。