impostazione canvas toDataURL qualità jpg

Question

Voglio impostare le impostazioni di qualità quando codifico un elemento canvas su jpg.

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

non mi dà un'opzione di qualità. C'è una libreria alternativa che posso usare?

Correlato: qual è l'impostazione di qualità predefinita utilizzata dai diversi browser?

Answer 1

Il secondo argomento della funzione è la qualità. Si va da 0.0 a 1,0

canvas.toDataURL(type,quality); 

Here si è esteso informazioni

E non credo che sia possibile conoscere la qualità dell'immagine, una volta viene convertito. Come puoi vedere su questo feedle l'unica informazione che ottieni quando si stampa il valore sulla console è il tipo e il codice dell'immagine stesso.

Ecco uno snippet di codice che ho creato per conoscere il valore predefinito della qualità utilizzata dal browser.

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

Fondamentalmente ho pensato che il cambiamento sull'immagine stessa si sarebbe riflesso sulla stringa base64. Quindi il codice prova tutti i valori possibili sul metodo toDataURL() e confronta la stringa risultante con quella predefinita. E sembra funzionare. Per il cromo ottengo 0,92.

Here è l'esempio di lavoro su un violino.

Answer 2

Edit: Se si utilizza Fabric.js, un altro, molto semplice e modo leggibile, è questo:

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

Questo permette anche di avere altre opzioni, dando la possibilità di ritagliare l'immagine, ecc:

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

jsFiddle: http://jsfiddle.net/fabricjs/NfZVb/