Как добиться высокого качества обрезанных изображений с холста?

Question

Я отчаянно ищу хороший инструмент для обрезки. Есть куча там, например:

Croppic

Cropit

Jcrop

Самое главное, что я пытаюсь найти инструмент кадрирования, что обрезает изображения, не делая уменьшенное изображение с низким разрешением. Вы можете взломать это, используя тег canvas, изменив размер изображения. Таким образом, сам образ остается родным, только представление меньше. DarkroomJS также был чем-то вроде решения, но, к сожалению, загруженная демо не работала. Я постараюсь выяснить, что случилось. Кто-нибудь знает какие-то отличные альтернативы или как получить обрезанные изображения ... скажем, «родное» разрешение?

Заранее благодарен!

Answer 1

Вы полагаетесь на инструмент обрезки, чтобы обеспечить интерфейс для пользователей. проблема в том, что возвращенное изображение зависит от интерфейса, а не от исходного изображения. Вместо того, чтобы просеивать через различные API, чтобы убедиться, что они обеспечивают какой-то способ контроля этого поведения (я предполагаю, по крайней мере, некоторые из них), и потому что это такая простая процедура, я покажу, как обрезать изображение вручную.

Чтобы использовать JCrop в качестве примера

Jcrop предоставляет различные события для cropstart, cropmove, cropend ... Вы можете добавить слушатель слушать эти события и сохранить копию интерфейса состояния тока кадрирования

var currentCrop;  
jQuery('#target').on('cropstart cropmove cropend',function(e,s,crop){ 
    currentCrop = crop; 
} 

Я не знаю, где вы установили размер интерфейса и я предполагаю, что события возвращают детали урожая в масштабе интерфейса

var interfaceSize = { //you will have to work this out 
    w : ?, 
    h : ?. 
} 

Ваш или 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 
} 

Вы только тогда нужно вызвать эту функцию, когда кнопка кадрирования нажата

var croppedImage; 
myButtonElement.onclick = function(){ 
    if(currentCrop !== undefined){ // ensure that there is a selected crop 
     croppedImage = myCrop(myImage,currentCrop,interfaceSize);    
    } 
} 

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

imageData = croppedImage.toDataURL(mimeType,quality) // quality is optional and only for "image/jpeg" images