Результаты поиска с изображениями

Question

Я пытаюсь работать с jCrop и canvas.

Вместо отправки изображения на сервер и обратно с обрезанным изображением я пытаюсь обрезать его напрямую, используя холст, потому что с результатом я преобразую обрезку в изображение base64 и отправлю на сервер ,

В результате я получаю drawImage с холста.

Но проблема:

я установить изображение в 400x400, но исходное изображение, гораздо больше, то, что и я думаю, что холст становится размером непосредственно из исходного изображения, а не один, что я определить, поэтому результат не похож на урожай.

Я сделал пример с точной проблемой.

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/