如何在 Vue.Js 中将图像 URL 从服务器（API / ImageURL）转换为 Base64答案

【问题标题】：How to Convert image URL from server (API / ImageURL) to Base64 in Vue.Js如何在 Vue.Js 中将图像 URL 从服务器（API / ImageURL）转换为 Base64
【发布时间】：2020-10-23 13:56:39
【问题描述】：

我看到很多关于这个问题的参考资料是关于upload file and convert to base64 但在我的情况下，我想从服务器转换一个图像 URL 并将其转换为 base64 但我仍然没有这样做，现在我尝试了这样，但它仍然失败，因为它没有显示任何内容

这是我的html：

<div v-if="questionData">
    <img class="img-preview-download" :src="questionData.image_url? getBase64Image(questionData.image_url) : 'https://via.placeholder.com/640x360'" alt="img-preview">
</div>

这是我的方法：

getBase64Image(img) {
    console.log("cek base64 : ", btoa(img));
    return `data:image/jpeg;base64,${btoa(img)}`;
},

我使用文件阅读器阅读了一些内容，但当您使用input 上传数据时，它不只是用于文件吗？有人可以帮我解决这个问题吗？我正在使用 Vue.Js 作为框架

当我使用这种方法时，我得到了这样的结果：

【问题讨论】：

变量image_url里面是什么？如果它是 URL 字符串（类似于 https://mypage.io/image.png），那么将其转换为 base64 将需要您首先通过 AJAX 调用获取其内容，然后将该 blob 转换为 base64。
@JanMadeyski 谢谢您的回复，对不起，我忘了提及它，在变量image_url 中它是我从服务器获取的图像文件（外部图像文件），似乎btoa()只改变字符串而不是文件本身

标签： javascript vue.js vuejs2

【解决方案1】：

所以这是我对未来自己的回答，他可能会忘记并再次陷入这个问题！

您可以通过制作一个新图像并在该图像文件中来解决它，您可以添加您的src，以便在仍然加载时可以处理图像或onload。

记住！

既然是你，你可能会删除最后一个image.src = url 以获得干净的代码，但这很重要，如果你删除那行，image.onload 将不会被触发，因为它会搜索图像源。如果您尝试使用image.srcObject 将其与mediaStream 放在一起，它将给您Resolution Overloaded，因为您仍然找不到此问题的答案，没关系，您可以先使用图像，因为您的步骤是实现how to get file from Image URL。所以这是你用来解决这个问题的方法：

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;
},

仅供参考，我使用此库将div 更改为image 文件： vue-html2canvas

注意事项：

如果你想知道为什么我最后给self.assignImageBase64(dataUrl);这个函数，这是因为我仍然想知道onload是如何工作的，以及如何将Base64 url返回给父级，所以我只是在另一个函数中再次分配它因为它更容易做到。

【讨论】：