Base64 URL friendly

Encode / Decode a Base64 encoded String to a URL friendly format. That is, the '+' and '/' character are replaced by '-' and '_'. Also the padding '=' characters are removed.

by Mahmoud Kandeel

JavaScript

/**
 * Convert an image 
 * to a base64 url
 * @param  {String}   url         
 * @param  {Function} callback    
 * @param  {String}   [outputFormat=image/png]           
 */
function convertImgToBase64URL(url, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'),
      dataURL;
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}


convertImgToBase64URL('https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Iglesia_de_San_Juan_el_Real%2C_Calatayud%2C_Espa%C3%B1a%2C_2017-01-08%2C_DD_28-30_HDR.jpg/800px-Iglesia_de_San_Juan_el_Real%2C_Calatayud%2C_Espa%C3%B1a%2C_2017-01-08%2C_DD_28-30_HDR.jpg', function(base64Img) {
  // Base64DataURL
});