캔버스에서 고품질 자른 이미지를 얻으려면 어떻게해야합니까?

Question

나는 훌륭한 자르기 도구를 필사적으로 찾고 있습니다. 무리는 예를 들어, 거기에 있습니다

Croppic

Cropit

Jcrop

내가 찾으려고 노력하고 가장 중요한 것은하지 않고 이미지를 작물 자르기 도구입니다 해상도가 낮은 이미지를 자릅니다. 캔버스 태그를 사용하여 이미지의 크기를 조정하여 해킹 할 수 있습니다. 이렇게하면 이미지 자체가 원래대로 유지되고 표현 만 작아집니다. DarkroomJS도 해결책에 가까웠지만, 불행히도 다운로드 한 데모는 작동하지 않았습니다. 나는 무엇이 잘못되었는지 알아 내려고 노력할 것이다. 누군가 훌륭한 대안이나 자른 이미지를 얻는 방법을 알고 있습니까? "기본"해상도라고합시다.

미리 감사드립니다.

Answer 1

사용자에게 인터페이스를 제공하기 위해 자르기 도구를 사용하고 있습니다. 문제는 리턴 된 이미지가 원래 이미지가 아닌 인터페이스에 맞게 크기가 조정된다는 것입니다. 다양한 API를 통해 이러한 동작을 제어 할 수있는 방법을 제공하는지 (적어도 필자는 일부분을 가정 함), 그리고 이렇게 간단한 절차이기 때문에 수동으로 이미지를 자르는 방법을 보여줄지를 살펴보기보다는

는

Jcrop이 cropstart, cropmove위한 다양한 이벤트를 제공하는 예로서 JCrop를 사용하려면, cropend ... 당신은 청취자가이 이벤트를 수신하기 위해 추가하고 현재 자르기 인터페이스 상태의 복사본을 유지할 수 있습니다

당신이 인터페이스 크기를 설정하고 내가 이벤트가

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