add the ability to load images using ajax

index.html

@@ -39,7 +39,7 @@
 var snapshot = document.getElementById('snapshot');
 var map = L.mapbox.map('map', 'mapbox.streets')
   .setView([38.88995, -77.00906], 15);
-
+L.marker([38.88995, -77.00906]).addTo(map);
 document.getElementById('snap').addEventListener('click', function() {
     leafletImage(map, doImage);
 });

index.js

@@ -1,7 +1,7 @@
 var queue = require('./queue');
 
 // leaflet-image
-module.exports = function leafletImage(map, callback) {
+module.exports = function leafletImage(map, callback, useAjax) {
 
     var dimensions = map.getSize(),
         layerQueue = new queue(1);
@@ -208,6 +208,13 @@ module.exports = function leafletImage(map, callback) {
             });
         };
 
+        if (useAjax) {
+            getBase64(url, function(data) {
+                im.src = 'data: image/png;base64, ' + data;
+                im.onload();
+            });
+            return;
+        }
         im.src = url;
 
         if (isBase64) im.onload();
@@ -216,4 +223,24 @@ module.exports = function leafletImage(map, callback) {
     function addCacheString(url) {
         return url + ((url.match(/\?/)) ? '&' : '?') + 'cache=' + (+new Date());
     }
+
+    function getBase64(url, callback) {
+        var request = new XMLHttpRequest();
+        request.open('GET', url, true);
+        request.responseType = 'arraybuffer';
+        request.onload = function() {
+            if (request.status >= 200 && request.status < 400) {
+                var buffer = this.response,
+                    binary = '',
+                    bytes = new Uint8Array(buffer),
+                    len = bytes.byteLength;
+
+                for (var i = 0; i < len; i++) {
+                    binary += String.fromCharCode(bytes[i]);
+                }
+                callback(btoa(binary));
+            }
+        };
+        request.send();
+    }
 };

leaflet-image.js

@@ -1,9 +1,8 @@
-(function(e){if("function"==typeof bootstrap)bootstrap("leafletimage",e);else if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeLeafletImage=e}else"undefined"!=typeof window?window.leafletImage=e():global.leafletImage=e()})(function(){var define,ses,bootstrap,module,exports;
-return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.leafletImage = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 var queue = require('./queue');
 
 // leaflet-image
-module.exports = function leafletImage(map, callback) {
+module.exports = function leafletImage(map, callback, useAjax) {
 
     var dimensions = map.getSize(),
         layerQueue = new queue(1);
@@ -210,6 +209,13 @@ module.exports = function leafletImage(map, callback) {
             });
         };
 
+        if (useAjax) {
+            getBase64(url, function(data) {
+                im.src = 'data: image/png;base64, ' + data;
+                im.onload();
+            });
+            return;
+        }
         im.src = url;
 
         if (isBase64) im.onload();
@@ -218,6 +224,26 @@ module.exports = function leafletImage(map, callback) {
     function addCacheString(url) {
         return url + ((url.match(/\?/)) ? '&' : '?') + 'cache=' + (+new Date());
     }
+
+    function getBase64(url, callback) {
+        var request = new XMLHttpRequest();
+        request.open('GET', url, true);
+        request.responseType = 'arraybuffer';
+        request.onload = function() {
+            if (request.status >= 200 && request.status < 400) {
+                var buffer = this.response,
+                    binary = '',
+                    bytes = new Uint8Array(buffer),
+                    len = bytes.byteLength;
+
+                for (var i = 0; i < len; i++) {
+                    binary += String.fromCharCode(bytes[i]);
+                }
+                callback(btoa(binary));
+            }
+        };
+        request.send();
+    }
 };
 
 },{"./queue":2}],2:[function(require,module,exports){
@@ -301,7 +327,5 @@ module.exports = function leafletImage(map, callback) {
   function noop() {}
 })();
 
-},{}]},{},[1])
-(1)
-});
-;
+},{}]},{},[1])(1)
+});