web-dev-qa-db-fra.com

réglage de la toile toDataURL jpg quality

Je souhaite définir le paramètre de qualité lorsque jode un élément de toile en jpg.

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

ne me donne pas une option de qualité. Existe-t-il une autre bibliothèque que je peux utiliser?

Connexe: quel est le paramètre de qualité par défaut utilisé par les différents navigateurs?

javascripthtml5-canvas
38
jedierikb

Le deuxième argument de la fonction est la qualité. Il varie de 0,0 à 1,0

canvas.toDataURL(type,quality);

Ici vous avez des informations détaillées 

Et je ne pense pas qu'il soit possible de connaître la qualité de l'image une fois convertie. Comme vous pouvez le voir sur ce feedle la seule information que vous obtenez lors de l’impression de la valeur sur la console est le type et le code de l’image elle-même.

Voici un extrait de code que j'ai créé pour connaître la valeur par défaut de la qualité utilisée par le navigateur.

    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);
        }
    }

Fondamentalement, je pensais que le changement sur l'image elle-même serait répercuté sur la chaîne base64. Ainsi, le code essaie simplement toutes les valeurs possibles de la méthode toDataURL() et compare la chaîne obtenue à la chaîne par défaut. Et cela semble fonctionner. Pour le chrome, je reçois 0,92.

Ici est l'exemple de travail sur un violon.

66
limoragni

Utiliser Fabric.js , de manière très simple et lisible par l’homme, est le suivant:

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

Cela vous permet également d’avoir d’autres options, vous permettant de rogner l’image, etc.:

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

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

0
Chuck Le Butt