Javascriptのトリミング画像クライアント側

Question

私はjavascriptまたはjQueryを使用して、サーバーにアップロードする前にクライアント側で画像を切り抜いて圧縮したいと考えています。

ワークフロー：

1. 選択画像
2. クロップ画像の特定のサイズには
3. 作物
4. を圧縮アップロード

誰もが前にこれを行っていますか？どのようなプラグインか、何をする必要がありますか？

facebookは画像を圧縮してアップロードする前に自動的に画像のサイズを変更できます。

Answer 1

EDIT（2014）：この答えは廃止されました！ JavaScriptは、利用可能なブラウザリソースによって、 に深く影響を受ける実装を備えたプログラミング言語です。 3つの 年前にこの投稿が作成された（2011年7月）ブラウザには、 が尋ねたので、OPが信頼できる機能の の種類を持っていなかったので、私の答えです。
これが今行われる方法にまだ興味があるなら、その間に と出てきたこの質問に対する多くの回答を参照してください。しかし、明らかに無意味なので、 はこの答えにさらにコメントすることを控えてください。ありがとうございました。

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のキャンバスを介して画像操作の多くをサポートしています。これを達成するために使用することができるツールが含まれます：

HTML5 Canvas Image Optimization

Pixastic Image Processing Library

Resize & Crop for Jquery (ClientSide)

が、私はそれが同様のソリューションを探している人のために役立ち願っています...