it-swarm.com.de

einstellen der Leinwand aufDataURL jpg-Qualität

Ich möchte die Qualitätseinstellung festlegen, wenn ein Leinwandelement in jpg codiert wird.

var data = myCanvas.toDataURL( "image/jpeg" );

gibt mir keine Qualitätsoption. Gibt es eine alternative Bibliothek, die ich verwenden kann?

Verwandte: Welche Standardeinstellung für die Qualität haben die verschiedenen Browser?

38
jedierikb

Das zweite Argument der Funktion ist die Qualität. Sie reicht von 0,0 bis 1,0

canvas.toDataURL(type,quality);

Hier Sie haben erweiterte Informationen 

Ich glaube nicht, dass es möglich ist, die Qualität des Bildes zu kennen, wenn es einmal konvertiert ist. Wie Sie auf diesem feedle sehen können, erhalten Sie beim Ausdrucken des Wertes auf der Konsole nur den Typ und den Bildcode.

Hier ist ein Codeausschnitt, den ich gemacht habe, um den Standardwert der vom Browser verwendeten Qualität zu kennen.

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

    var url = c.toDataURL('image/jpeg');
    var v = 0
    for(var i = 0; i < 100; i++ ){

        v += 0.01;
        x = parseFloat((v).toFixed(2))
        var test = c.toDataURL('image/jpeg', x);

        if(test == url){
            console.log('The default value is: ' + x);
        }
    }

Grundsätzlich dachte ich, dass sich die Änderung am Bild selbst in der base64-Zeichenfolge widerspiegeln würde. Der Code probiert also alle möglichen Werte der toDataURL()-Methode aus und vergleicht den resultierenden String mit dem Standardwert. Und es scheint zu funktionieren. Für Chrom bekomme ich 0,92.

Hier ist das Arbeitsbeispiel auf einer Geige.

66
limoragni

Die Verwendung von Fabric.js ist eine sehr einfache und für Menschen lesbare Methode:

canvas.toDataURL({
   format: 'jpeg',
   quality: 0.8
});

Auf diese Weise haben Sie auch andere Optionen, mit denen Sie das Bild zuschneiden können.

canvas.toDataURL({
    format: 'png',
    left: 300,
    top: 250,
    width: 200,
    height: 150
})

jsFiddle: http://jsfiddle.net/7f9bqs00/30/

0
Chuck Le Butt