Javascript修剪圖像客戶端

Question

我想在使用javascript或jQuery在客戶端上傳到服務器之前剪切和壓縮圖像。

工作流程：

1. 選擇圖片
2. 裁剪圖像要具體尺寸
3. 壓縮農作物
4. 上傳

有沒有人這樣做呢？什麼插件或我必須做什麼？

我看facebook可以在上傳前壓縮圖像並自動調整大小。

Answer 1

EDIT（2014）：這個答案現在已經過時了！ JavaScript是一種編程語言，它的實現受到了哪些瀏覽器資源可用的影響，因此受到深度影響 。三個 年前，當這個職位（2011年7月）瀏覽器沒有任何 種可靠的功能，這將允許OP做他所要求的，因此我的答案。
如果您仍然對如何完成這項工作感興趣，請參考這個問題的許多答案，這些問題在SO上同時出現了 。但請限制自己對此答案作出任何進一步評論 ，因爲它顯然毫無意義。謝謝。

簡單地說，JavaScript並不是要做你所要求的。無論您遇到哪種服務，都可以操縱選定的圖像，您可以在您提供任何其他功能之前下注圖像，以便將圖像完全上傳到服務器。

Answer 2

可以使用HTML5畫布裁剪他們：

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

Answer 3

您可以使用Base64做到這一點，看的網站我的工作：http://www.wordirish.com 所有圖像都在使用HTML5或客戶端操作適用於舊瀏覽器的閃光燈。

你只需要做到這一點：

function thisFunctionShoulBeCallByTheFileuploaderButton(e){ 
    e.preventDefault && e.preventDefault(); 
    var image, canvas, i; 
    var images = 'files' in e.target ? e.target.files : 'dataTransfer' in e ? e.dataTransfer.files : []; 
    if(images && images.length) { 
     for(i in images) { 
      if(typeof images[i] != 'object') continue; 
      image = new Image(); 
      image.src = createObjectURL(images[i]); 
      image.onload = function(e){ 
       var mybase64resized = resizeCrop(e.target, 200, 150).toDataURL('image/jpg', 90); 
       alert(mybase64resized); 
      } 
     }   
    } 
} 

function resizeCrop(src, width, height){ 
    var crop = width == 0 || height == 0; 
    // not resize 
    if(src.width <= width && height == 0) { 
     width = src.width; 
     height = src.height; 
    } 
    // resize 
    if(src.width > width && height == 0){ 
     height = src.height * (width/src.width); 
    } 

    // check scale 
    var xscale = width/src.width; 
    var yscale = height/src.height; 
    var scale = crop ? Math.min(xscale, yscale) : Math.max(xscale, yscale); 
    // create empty canvas 
    var canvas = document.createElement("canvas");     
    canvas.width = width ? width : Math.round(src.width * scale); 
    canvas.height = height ? height : Math.round(src.height * scale); 
    canvas.getContext("2d").scale(scale,scale); 
    // crop it top center 
    canvas.getContext("2d").drawImage(src, ((src.width * scale) - canvas.width) * -.5 , ((src.height * scale) - canvas.height) * -.5); 
    return canvas; 
} 

function createObjectURL(i){ 
    var URL = window.URL || window.webkitURL || window.mozURL || window.msURL; 
    return URL.createObjectURL(i); 
} 

小菜一碟;）

Answer 4

現代瀏覽器現在可以通過jQuery和HTML5畫布支持很多圖像處理的。可用於實現這一目標的工具包括：

Resize & Crop for Jquery (ClientSide)

Pixastic Image Processing Library

HTML5 Canvas Image Optimization

我希望證明爲尋找類似的解決方案有用...