Skip to content

Instantly share code, notes, and snippets.

@oliyh

oliyh/image-url-to-data-uri.js

Created November 7, 2015 22:17
Show Gist options
  • Save oliyh/db3d1a582aefe6d8fee9 to your computer and use it in GitHub Desktop.
Save oliyh/db3d1a582aefe6d8fee9 to your computer and use it in GitHub Desktop.
Download ZIP
Convert an image url to a data URI without canvas
Raw
image-url-to-data-uri.js
// 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();
@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