Wie können Sie qualitativ hochwertige Bilder aus Leinwand erzielen?

Question

Ich bin verzweifelt auf der Suche nach einem guten Cropping-Werkzeug. Es gibt eine Menge gibt, zum Beispiel:

Croppic

Cropit

Jcrop

Die wichtigste Sache, die ich zu finden bin versucht, ein Zuschneidetool ist, dass die Bilder beschneidet, ohne die Herstellung von zugeschnittenes Bild mit niedriger Auflösung. Sie können dies hacken, indem Sie das Canvas-Tag verwenden, indem Sie die Größe des Bildes ändern. Auf diese Weise bleibt das Bild selbst nativ, nur die Darstellung ist kleiner. DarkroomJS war auch etwas in der Nähe der Lösung, aber leider hat die heruntergeladene Demo nicht funktioniert. Ich werde versuchen herauszufinden, was falsch ist. Kennt jemand einige gute Alternativen oder wie man die beschnittenen Bilder in ... native "Auflösung" bekommt?

Vielen Dank im Voraus!

Answer 1

Sie verlassen sich auf das Zuschneidewerkzeug, um eine Benutzeroberfläche für die Benutzer bereitzustellen. Das Problem besteht darin, dass das zurückgegebene Bild an die Schnittstelle und nicht an das Originalbild angepasst ist. Anstatt dass ich die verschiedenen APIs durchforste, um zu sehen, ob sie eine Möglichkeit bieten, dieses Verhalten zu kontrollieren (ich nehme an, zumindest einige davon würden es tun) und weil es so einfach ist, werde ich zeigen, wie man das Bild manuell schneidet.

So verwenden JCrop als Beispiel

Jcrop verschiedene Veranstaltungen für cropstart, cropmove bietet, cropend ... Sie können ein Zuhörer auf diese Ereignisse zu hören hinzufügen und eine Kopie des aktuellen Zuschneiden Schnittstelle Zustand halten

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

ich weiß nicht, wo Sie die Schnittstelle Größe festgelegt haben, und ich gehe davon aus das Geschehen um die Ernte Details an der Schnittstelle Skala

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

Ihre oder zurückgeben iginal Bild

var myImage = new Image(); // Assume you know how to load 

Also, wenn die Ernte Schaltfläche geklickt werden Sie die neuen Bilddetails durch Skalieren der Ernte erstellen kann wieder auf die ursprüngliche Bildgröße, eine Leinwand auf der beschnittene Größe zu schaffen, zeichnen das Bild so, dass der beschnittenen Bereich ist genau positioniert und gibt die Leinwand als neues Bild zurück.

// 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 
} 

Sie dann nur müssen diese Funktion aufzurufen, wenn die Ernte Taste

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

geklickt wird Sie das Bild zum Download auf eine DataURL umwandeln kann, und laden über

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