ustawianie płótna naDATAURL jpg quality

Question

Chcę ustawić jakość, gdy koduję element canvas do jpg.

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

nie daje mi opcji jakości. Czy istnieje alternatywna biblioteka, której mogę użyć?

Powiązane: jakie jest domyślne ustawienie jakości używane przez różne przeglądarki?

Answer 1

Drugim argumentem funkcji jest jakość. waha się od 0,0 do 1,0

canvas.toDataURL(type,quality); 

Here zostały rozszerzone informacje

I nie sądzę, że to możliwe, aby poznać jakość obrazu, kiedy zostanie przekonwertowany. Jak widać na tej feedle jedyną informacją, jaką uzyskasz podczas drukowania wartości na konsoli jest typ i sam kod obrazu.

Oto fragment kodu, w którym poznałem domyślną wartość jakości używanej przez przeglądarkę.

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

W zasadzie myślałem, że zmiana na samym obrazie zostanie odzwierciedlona na łańcuchu base64. Zatem kod po prostu wypróbuj wszystkie możliwe wartości w metodzie toDataURL() i porównuje wynikowy ciąg z domyślnym. I wydaje się, że działa. Dla chromu uzyskuję 0,92.

Here to działający przykład na skrzypcach.

Answer 2

Edycja: Jeśli używasz Fabric.js, kolejny, bardzo prosty i czytelny dla człowieka sposób, jest to:

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

ta pozwala również mieć inne opcje, co daje możliwość przycięcia obraz, etc:

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

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