Search code examples
javascriptjqueryimagedata-uri

My image to data-uri is damages the image


I have this image: enter image description here

With this code (in each function of images):

    var image = new Image();
    var canvas = document.createElement("canvas"),
      canvasContext = canvas.getContext("2d");
    image.src = $(this).attr("src");
    canvas.width = image.width;
    canvas.height = image.height;
    canvasContext.drawImage(image, 0, 0, image.width, image.height);
    var dataURL = canvas.toDataURL("image/jpeg");

I get this:

data:image/jpeg;base64,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

But it is just bad, if I convert it online I get:

Much better quality

Which is just perfect here quality. What is wrong on my code? I get so shorter data uri.

NEW: I have added the var dataURL = canvas.toDataURL("image/jpeg", 1.0); quality and it works perfectly in Chrome. But in IE it is better, but still very bad. http://ctrlv.cz/shots/2015/02/16/lx1J.png Left: Chrome, Right: IE 11. Is here a way how to improve it in IE 11?


Solution

  • According to MDN documentation of HTMLCanvasElement.toDataURL, you can give a second parameter that controls the quality, a number between 0 and 1.

    So try:

    var dataURL = canvas.toDataURL("image/jpeg", 1.0);
    

    and see whether the quality is good enough for you, but since 1.0 equals "full" quality, I expect it will look exactly like what you see in the canvas itself.

    Note: if the second parameter is anything else than a Number between 0 and 1, the browser-specific default value will be used for quality. I don't know for sure what that value is for any browser, but according to this question both Chrome and Firefox use 0.92.