キャンバスから高品質のクロップ画像を取得するにはどうすればよいですか？

Question

私は必死に良い作物を探しています。束には、例えば、そこにあります。

Croppic

Cropit

Jcrop

私が見つけることを試みている最も重要なことはせずに、画像をトリミングトリミングツールです解像度の低いクロップ画像。イメージのサイズを変更してcanvasタグを使用して、これをハックすることができます。このようにして、画像自体はネイティブにとどまり、表現だけが小さくなります。 DarkroomJSも解決策に近いものでしたが、残念ながらダウンロードされたデモは機能しませんでした。私は何が間違っているか把握しようとします。誰かが偉大な選択肢を知っていますか、または切り取った画像をどのように取得するのですか...「ネイティブ」解像度を考えましょうか？

ありがとうございます！

Answer 1

ユーザーにインターフェイスを提供するためにクロップツールを使用しています。問題は、返されたイメージが元のイメージではなくインターフェイスにサイズ設定されていることです。さまざまなAPIを使ってこの動作を制御する何らかの方法を提供しているかどうか（私はそれらのうちのいくつかを想定しています）、単純な手順なので、手動で画像を切り抜く方法を示します。 Jcropはcropstart、cropmove、cropendのための様々なイベントを提供し

...あなたはこれらのイベントをリッスンするリスナーを追加し、現在のクロップインタフェース状態

のコピーを保持することができ、例としてJCropを使用するに

あなたがインターフェイスのサイズを設定していると私はイベントが

var interfaceSize = { //you will have to work this out 
    w : ?, 
    h : ?. 
} 

あなたまたはインタフェーススケールで作物の詳細を返すと仮定しています

var currentCrop;  
jQuery('#target').on('cropstart cropmove cropend',function(e,s,crop){ 
    currentCrop = crop; 
} 

私にはわかりませんiginal画像

var myImage = new Image(); // Assume you know how to load 

作物のボタンがクリックされたときにだからあなたはトリミングされたサイズでキャンバスを作成し、元の画像サイズにクロップ詳細をスケーリングして新しいイメージを作成することができ、トリミングされた領域のように画像を描画しますキャンバスをそのまま、または新しいイメージとして返します。

// image = image to crop 
// crop = the current cropping region 
// interfaceSize = the size of the full image in the interface 
// returns a new cropped image at full res 
function myCrop(image,crop,interfaceSize){ 
    var scaleX = image.width/interfaceSize.w; // get x scale 
    var scaleY = image.height/interfaceSize.h; // get y scale 
    // get full res crop region. rounding to pixels 
    var x = Math.round(crop.x * scaleX); 
    var y = Math.round(crop.y * scaleY); 
    var w = Math.round(crop.w * scaleX); 
    var h = Math.round(crop.h * scaleY); 
    // Assume crop will never pad 
    // create an drawable image 
    var croppedImage = document.createElement("canvas"); 
    croppedImage.width = w; 
    croppedImage.height = h; 
    var ctx = croppedImage.getContext("2d"); 
    // draw the image offset so the it is correctly cropped 
    ctx.drawImage(image,-x,-y); 
    return croppedImage 
} 

あなただけクロップボタンはあなたがダウンロードしてdataURLに画像を変換することができ

var croppedImage; 
myButtonElement.onclick = function(){ 
    if(currentCrop !== undefined){ // ensure that there is a selected crop 
     croppedImage = myCrop(myImage,currentCrop,interfaceSize);    
    } 
} 

をクリックしたときに、この関数を呼び出す必要があり、

imageData = croppedImage.toDataURL(mimeType,quality) // quality is optional and only for "image/jpeg" images