सेटिंग कैनवास toDataURL jpg गुणवत्ता

Question

मैं गुणवत्ता सेटिंग सेट करना चाहता हूं जब मैं jpg पर कैनवास तत्व को एन्कोड करता हूं।

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

मुझे एक गुणवत्ता विकल्प नहीं देता है। क्या कोई वैकल्पिक लाइब्रेरी है जिसका मैं उपयोग कर सकता हूं?

संबंधित: विभिन्न ब्राउज़रों द्वारा उपयोग की जाने वाली डिफ़ॉल्ट गुणवत्ता सेटिंग क्या है?

Answer 1

फ़ंक्शन का दूसरा तर्क गुणवत्ता है। यह 0.0 से 1,0

canvas.toDataURL(type,quality); 

Here आप जानकारी

विस्तार किया है और मैं यह छवि की गुणवत्ता एक बार बदल जाती है पता करने के लिए संभव है नहीं लगता है के बीच है। जैसा कि आप इस feedle पर देख सकते हैं, कंसोल पर मूल्य प्रिंट करते समय आपको प्राप्त होने वाली एकमात्र जानकारी टाइप और छवि कोड ही होती है।

यहां कोड का एक स्निपेट है जिसे मैंने ब्राउज़र द्वारा उपयोग की जाने वाली गुणवत्ता के डिफ़ॉल्ट मान को जानने के लिए बनाया है।

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

असल में मैंने सोचा कि छवि पर परिवर्तन बेस 64 स्ट्रिंग पर दिखाई देगा। तो कोड toDataURL() विधि पर सभी संभावित मानों को आजमाएं और परिणामस्वरूप स्ट्रिंग को डिफ़ॉल्ट के साथ तुलना करें। और ऐसा लगता है कि काम करता है। क्रोमियम के लिए मुझे 0.92 मिलते हैं।

Here एक पहेली पर कामकाजी उदाहरण है।

Answer 2

संपादित करें: आप Fabric.js, एक और, बहुत ही सरल और मानव पठनीय रास्ते का उपयोग कर रहे हैं, तो यह है:

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

यह भी आप कांट-छांट करने की क्षमता दे रही है, तो आप अन्य विकल्पों की अनुमति देता है छवि, आदि:

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

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