Skip to content

Instantly share code, notes, and snippets.

@oliyh
Created November 7, 2015 22:17
  • Star 18 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save oliyh/db3d1a582aefe6d8fee9 to your computer and use it in GitHub Desktop.
Convert an image url to a data URI without canvas
// hard won knowledge from http://stackoverflow.com/questions/20035615/using-raw-image-data-from-ajax-request-for-data-uri
var xmlHTTP = xhr.XMLHttpRequest();
xmlHTTP.open('GET', url, true);
xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e) {
var arr = new Uint8Array(this.response);
var raw = String.fromCharCode.apply(null,arr);
var b64 = base64.encode(raw);
var dataURL="data:image/png;base64," + b64;
};
xmlHTTP.send();
@FLasH3r
Copy link

FLasH3r commented Jul 6, 2018

Uncaught ReferenceError: xhr is not defined

@ImSeaWorld
Copy link

@FLasH3r

var xmlHTTP = new XMLHttpRequest();

That's all you need.

@944189562
Copy link

var b64 = btoa(raw);

@vinaydotblog
Copy link

This solutions works for both <img> and SVG's <image>. https://gist.github.com/metrofun/5536671

@trd-peterandrew
Copy link

How do I access the dataUrl which stores the base64 string?

@sentiasa
Copy link

sentiasa commented Apr 18, 2019

@CalebMacdonaldBlack
Copy link

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

@rohitchatla
Copy link

rohitchatla commented Aug 2, 2020

@CalebMacdonaldBlack seems to be having CORS error in XHR.
Any comments on this ??

@ozzpy
Copy link

ozzpy commented Aug 9, 2020

@CalebMacdonaldBlack seems to be having CORS error in XHR.
Any comments on this ??

same problem

@mohamad68
Copy link

@CalebMacdonaldBlack
thanks a lot for this solution

@remyrd
Copy link

remyrd commented Oct 19, 2021

Rewrote this into re-frame / ajax-cljs

(require '[ajax.protocols :as pr])

;; effecting with re-frame-http-fx
{:http-xhrio {,,,
              :response-format {:content-type "image/png"
                                :description "PNG image"
                                :read pr/-body
                                :type :arraybuffer}
              :on-success [::my-handler]}

(rf/reg-event-db
 ::my-handler
  (fn [db [_ response]]
    (assoc db :thing (->> response
                          (js/Uint8Array.)
                          (js/String.fromCharCode.apply nil)
                          (js/btoa)
                          (str "data:image/png;base64,")))))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment