CODEWITHSUNDEEP
javascriptimagevue.jsbase64
heyadev
heyadev

Reputation: 65

How to convert remote image to base64 in javascript

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.

Upvotes: 0

Views: 288

Answers (1)

heyadev
heyadev

Reputation: 65

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!

Upvotes: 1

Related Questions