作物和畫布結果

Question

我正在嘗試使用jCrop和canvas。

而不是發送圖像到服務器，並返回一個裁剪圖像，我試圖直接裁剪它，使用畫布，因爲結果，我轉換作物在base64圖像併發送到服務器。

我從畫布中使用drawImage的結果。

但問題是：

我的圖像設置爲400×400，但原始圖像要大得多那麼，我想在畫布上直接從原始圖像獲取的大小，而不是一個我確定，所以結果不像莊稼。

我舉了一個具體問題的例子。

Demo

只是裁剪圖像，然後單擊裁剪。

我失蹤了什麼？

編輯：我更改爲320x320的圖像，看起來像作物工作正常，但其他圖像不是方形，沒有任何工作。

Answer 1

通過將圖像的原始尺寸除以頁面上的當前尺寸，然後將該剪裁矩形的座標乘以該比例，可以找到原始圖像上的座標。

var img = document.getElementById("canvasToThumb"), 
    $img = $(img), 
    imgW = img.width, 
    imgH = img.height; 

var ratioY = imgH/$img.height(), 
    ratioX = imgW/$img.width(); 

var getX = $('#x').val() * ratioX, 
    getY = $('#y').val() * ratioY, 
    getWidth = $('#w').val() * ratioX, 
    getHeight = $('#h').val() * ratioY; 

的jsfiddle - http://jsfiddle.net/s39P3/