convert an image URL to base64

Question

I have a photo pulled up from Facebook graph API, and I'm trying to upload it to my database but i have to first convert it to base 64 how do i do this in angularJS or Javascript. i tried using the library: https://github.com/ninjatronic/angular-base64 but it didn't work

   $scope.prof_pic_link = $base64.encode(data.picture.data.url);
   $scope.prof_pic_link = encodeURIComponent($scope.prof_pic_link);

Try to check this: http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript — Grald, Aug 23 '15 at 03:49
Actually graph-API does [serve all images with CORS enabled](http://stackoverflow.com/a/22431856/3702797). So you just need the canvas method posted in @Grald link, with the image `crossorigin` property set to `'anonymous'`. (won't work for IE though). — Kaiido, Aug 23 '15 at 04:17

score -1 · Answer 1 · answered Aug 25 '15 at 04:44

-1

I've used following function for encoding binary data:

var base64_encode = function (data) {
    //  discuss at: http://phpjs.org/functions/base64_encode/
    // original by: Tyler Akins (http://rumkin.com)
    // improved by: Bayron Guevara
    // improved by: Thunder.m
    // improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // improved by: Rafał Kukawski (http://kukawski.pl)
    // bugfixed by: Pellentesque Malesuada
    //   example 1: base64_encode('Kevin van Zonneveld');
    //   returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
    //   example 2: base64_encode('a');
    //   returns 2: 'YQ=='

    var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
    var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
      ac = 0,
      enc = '',
      tmp_arr = [];

    if (!data) {
        return data;
    }

    do { // pack three octets into four hexets
        o1 = data.charCodeAt(i++);
        o2 = data.charCodeAt(i++);
        o3 = data.charCodeAt(i++);

        bits = o1 << 16 | o2 << 8 | o3;

        h1 = bits >> 18 & 0x3f;
        h2 = bits >> 12 & 0x3f;
        h3 = bits >> 6 & 0x3f;
        h4 = bits & 0x3f;

        // use hexets to index into b64, and append result to encoded string
        tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
    } while (i < data.length);

    enc = tmp_arr.join('');

    var r = data.length % 3;

    return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
}

answered Aug 25 '15 at 04:44

Maksym Kozlenko

10,273
2
66
55

This will encode the url, (`http://example.com/image.png` -> `aHR0cDovL2V4YW1wbGUuY29tL2ltYWdlLnBuZw==` which is easily feasible with `btoa()`). How do you encode the image? (tip, [check the duplicate](http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript)) – Kaiido Aug 25 '15 at 05:07
Well dataUrl for base64 converted image is just the combination of `"data:image/png, base64;"` header and the base64 value of the image data. Your solution is just a rewrite of the atob method, which is useless if you only have the image url. – Kaiido Aug 25 '15 at 05:17
Check this demo. It takes image from camera, saves it to canvas and converts it into base64 http://plnkr.co/edit/aKlNu49ny28dfoJU8IqV?p=preview – Maksym Kozlenko Aug 25 '15 at 05:49
and it doesn't answer at all the OP's question. Also, canvas already has a toBlob method, It seems you really like to rewrite our own already existing methods :) – Kaiido Aug 25 '15 at 06:42
Already existing methods in which browser? btoa() and atob() is not supported by all browsers. If that would be supported by all browsers where won't be any polyfills https://github.com/davidchambers/Base64.js – Maksym Kozlenko Aug 25 '15 at 07:08
The only browser that does support ` – Kaiido Aug 25 '15 at 07:56

convert an image URL to base64

1 Answers1