How to set the image quality while converting a canvas with the “toDataURL” method?

by

The second argument of the function is the quality. It ranges from 0.0 to 1.0

canvas.toDataURL(type,quality);

Here you have extended information

And I don’t think it’s possible to know the quality of the image once is converted. As you can see on this feedle the only information you get when printing the value on the console is the type and the image code itself.

Here’s a snippet of code I made to know the default value of the quality used by the 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);
        }
    }

Basically I thought that the change on the image itself would be reflected on the base64 string. So the code just try all the possible values on the toDataURL() method and compares the resulting string with the default one. And it seems to work. For chromium I get 0.92.

Here is the working example on a fiddle.

More Related Contents:

  1. Accessing JPEG EXIF rotation data in JavaScript on the client side
  2. Resize image with javascript canvas (smoothly)
  3. Save inline SVG as JPEG/PNG/SVG
  4. Draw border around nontransparent part of image on canvas
  5. Load image from url and draw to HTML5 Canvas
  6. How to flip images horizontally with HTML5
  7. How to detect shape on a transparent canvas?
  8. Converting bytes to an image for drawing on a HTML5 canvas
  9. How to show animated image from PNG image using javascript? [ like gmail ]
  10. Asynchronously load images with jQuery
  11. HTML5 Canvas toDataURL returns blank
  12. How to draw an inline svg (in DOM) to a canvas?
  13. Capture frames from video with HTML5 and JavaScript
  14. Disable dragging an image from an HTML page
  15. Javascript Image Url Verify
  16. Web Workers and Canvas
  17. Open image in new window
  18. Make image fill div completely without stretching
  19. How to pixelate an image with canvas and javascript
  20. Draw HTML5/Javascript Canvas Path in Time
  21. How to render Streamable image on React coming from FastAPI server?
  22. Can I create multiple canvas elements on same page using p5js
  23. ReadFile in Base64 Nodejs
  24. How much data / information can we save / store in a QR code?
  25. Get pixel color from an image [duplicate]
  26. How lazy loading images using JavaScript works?
  27. Using base64-encoded images with HtmlService in Apps Script
  28. Dynamically replace img src attribute with jQuery
  29. Split text into pages and present separately (HTML5)
  30. How to convert a byte array into an image?

Leave a Comment