How to convert remote image to base64 in javascript

Question

I am working to implement FB register/login in Laravel & Vue.js. What I want is just to convert FB avatar to base64 string in Vue. I am using croppie package(https://github.com/Foliotek/Croppie), so I need to convert the remote image(Facebook avatar) to base64 string, so that I can show the avatar to the guests as well. Please help me.

Thanks in advance.

in what format does your code get the image now, prior to conversion? — Bravo
– Bravo, Commented Oct 7, 2019 at 1:09
Because I need to keep the current workflow. But now it's ok. thank you for your consideration. — heyadev
– heyadev, Commented Oct 7, 2019 at 2:01

heyadev · Accepted Answer · 2019-10-07 01:43:44Z

1

I am sorry to take your time. I have solved it myself as well.


    imgTo64(url) {
        var vm = this
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var arr = new Uint8Array(this.response);
            var raw = String.fromCharCode.apply(null, arr);
            var b64 = btoa(raw);

            var dataURL = 'data:image/' + dataType + ';base64,' + b64;

            console.log(dataURL);
        };

        var dataType = 'jpeg';
        xhr.open('GET', url);
        xhr.responseType = 'arraybuffer';
        xhr.send();
    },

If anyone want to get same thing, hope to get solution from my code. Thank you!

answered Oct 7, 2019 at 1:43

heyadev

656 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to convert remote image to base64 in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related