캔버스로 결과 자르기 및 결과 표시

Question

jCrop 및 canvas으로 작업하고 있습니다.

이미지를 서버로 보내고 자른 이미지 대신 다시 캔버스를 사용하여 이미지를 자르려고합니다. 결과적으로 이미지를 base64 이미지로 변환하고 서버로 전송합니다. .

결과 캔버스에서 drawImage을 사용합니다.

그러나 문제는 : 나는 400x400 크기로 이미지를 설정

하지만 원본 이미지는 그 다음 훨씬 더 큰 내가 캔버스 원본 이미지에서 직접 크기를 점점 생각이 아닌 한 그 I 결정, 그래서 결과는 작물처럼 아무것도 아닙니다.

정확한 문제가있는 예제를 만들었습니다.

Demo

그냥 이미지를 자르 다음 CROP을 클릭합니다.

내가 무엇이 누락 되었습니까?

편집 : 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/