How to Convert image URL from server (API / ImageURL) to Base64 in Vue.Js

So this is my answer for my future self, who might be forget and stumble again in this problem!

You can solve it by making a new image and inside that image file, you can add your src so the image can be process when still loading or onload.

Remember!

Since it is you, You might be remove the last image.src = url to get a clean code, but this is important, if you remove that line, image.onload will not be trigger because it will search for the image source. and if you try to use image.srcObject to put it with mediaStream it will give you Resolution Overloaded since you still not find the answer for this problem, it is okay, you can use the image first since your step is to achieve how to get file from Image URL. so this is the method you use to solve this problem:

downloadPreview() {
    const el = this.$refs.printMe;
    const options = {
        type: 'dataURL'
    };

    this.$html2canvas(el, options).then(data => {
        this.output = data;

        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = data;

        // this is just optional function to download your file
        a.download = `name.jpeg`;
        document.body.appendChild(a);
        a.click();
    });
},

convertImgUrlToBase64(url) {
    let self = this;
    var image = new Image();
    image.setAttribute('crossOrigin', 'anonymous'); // use it if you try in a different origin of your web

    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;

        canvas.getContext('2d').drawImage(this, 0, 0);

        canvas.toBlob(
            function(source) {
                var newImg = document.createElement("img"),
                url = URL.createObjectURL(source);

                newImg.onload = function() {
                // no longer need to read the blob so it's revoked
                URL.revokeObjectURL(url);
                };

                newImg.src = url;
            },
            "image/jpeg",
            1
        );

        // If you ever stumble at 18 DOM Exception, just use this code to fix it
        // let dataUrl = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        let dataUrl = canvas.toDataURL("image/jpeg");
        console.log("cek inside url : ", url);

        if(url === backgroundImg) {
            self.assignImageBase64Background(dataUrl);
        } else {
            self.assignImageBase64(dataUrl);
        }
    };
    image.src = url;
},

assignImageBase64(img) {
    this.imgBase64 = img;
},

just for information, I use this library to change the div into image file: vue-html2canvas

Notes:

If you ever wondering why I give self.assignImageBase64(dataUrl); this function in the end, this is because I still wondering how onload works, and how to return Base64 url to the parent thats why I just assign it again in another function since it easier to do.