Обрезать и показать результат с холстом

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

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

Результат, который я получаю, используя drawImage из холста.

Но проблема в следующем:

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

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

Демо

просто обрежьте изображение, а затем нажмите ОБРЕЗАТЬ.

Что мне не хватает?

Редактировать: я перехожу на изображение размером 320 x 320, и, похоже, кадрирование работает нормально, но с другими изображениями, которые не являются квадратными, ничего не работает.


canvas jquery css jcrop
person Ricardo Binns    schedule 25.02.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете найти координаты на исходном изображении, разделив исходные размеры изображения на его текущий размер на странице, а затем умножив координаты прямоугольника обрезки на это соотношение.

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/

person dmk    schedule 25.02.2013