[javascript] Get image data url in JavaScript?

Coming long after, but none of the answers here are entirely correct.

When drawn on a canvas, the passed image is uncompressed + all pre-multiplied.
When exported, its uncompressed or recompressed with a different algorithm, and un-multiplied.

All browsers and devices will have different rounding errors happening in this process
(see Canvas fingerprinting).

So if one wants a base64 version of an image file, they have to request it again (most of the time it will come from cache) but this time as a Blob.

Then you can use a FileReader to read it either as an ArrayBuffer, or as a dataURL.

_x000D_
_x000D_
function toDataURL(url, callback){_x000D_
    var xhr = new XMLHttpRequest();_x000D_
    xhr.open('get', url);_x000D_
    xhr.responseType = 'blob';_x000D_
    xhr.onload = function(){_x000D_
      var fr = new FileReader();_x000D_
    _x000D_
      fr.onload = function(){_x000D_
        callback(this.result);_x000D_
      };_x000D_
    _x000D_
      fr.readAsDataURL(xhr.response); // async call_x000D_
    };_x000D_
    _x000D_
    xhr.send();_x000D_
}_x000D_
_x000D_
toDataURL(myImage.src, function(dataURL){_x000D_
  result.src = dataURL;_x000D_
_x000D_
  // now just to show that passing to a canvas doesn't hold the same results_x000D_
  var canvas = document.createElement('canvas');_x000D_
  canvas.width = myImage.naturalWidth;_x000D_
  canvas.height = myImage.naturalHeight;_x000D_
  canvas.getContext('2d').drawImage(myImage, 0,0);_x000D_
_x000D_
  console.log(canvas.toDataURL() === dataURL); // false - not same data_x000D_
  });
_x000D_
<img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous">_x000D_
<img id="result">
_x000D_
_x000D_
_x000D_

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to image

Reading images in python Numpy Resize/Rescale Image Convert np.array of type float64 to type uint8 scaling values Extract a page from a pdf as a jpeg How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? Angular 4 img src is not found How to make a movie out of images in python Load local images in React.js How to install "ifconfig" command in my ubuntu docker image? How do I display local image in markdown?

Examples related to firefox

Drag and drop menuitems Class has been compiled by a more recent version of the Java Environment Only on Firefox "Loading failed for the <script> with source" Selenium using Python - Geckodriver executable needs to be in PATH Selenium using Java - The path to the driver executable must be set by the webdriver.gecko.driver system property How to use the gecko executable with Selenium Selenium 2.53 not working on Firefox 47 Postman addon's like in firefox Edit and replay XHR chrome/firefox etc? How to enable CORS on Firefox?

Examples related to greasemonkey

window.close and self.close do not close the window in Chrome Why doesn't document.addEventListener('load', function) work in a greasemonkey script? How do I get the information from a meta tag with JavaScript? Event when window.location.href changes alert a variable value Get image data url in JavaScript? How can I use jQuery in Greasemonkey?

Examples related to base64

How to convert an Image to base64 string in java? How to convert file to base64 in JavaScript? How to convert Base64 String to javascript file object like as from file input form? How can I encode a string to Base64 in Swift? ReadFile in Base64 Nodejs Base64: java.lang.IllegalArgumentException: Illegal character Converting file into Base64String and back again Convert base64 string to image How to encode text to base64 in python Convert base64 string to ArrayBuffer