使用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这样的东西。