Javascript 如何在Vue.Js中将服务器上的图像URL（API/ImageURL）转换为Base64

我看到的很多关于这个问题的参考资料都是关于

上传文件并转换为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>

我使用文件阅读器阅读了一些，但当您使用

input

上传数据时，它不是仅针对文件吗？有人能帮我解决这个问题吗？我正在使用Vue.Js作为框架

当我使用这种方法时，我得到如下结果：

---

所以这是我对未来自我的回答，我的未来自我可能会在这个问题上再次被遗忘和绊倒

您可以通过创建新图像来解决此问题，并在图像文件中添加

src

，以便在仍然加载或

onload

时处理图像

记住

由于是您，您可能需要删除最后一行

image.src=url

，以获得干净的代码，但这一点很重要，如果删除该行，

image.onload

将不会触发，因为它将搜索图像源。如果您尝试使用

image.srcObject

将其与

mediaStream

放在一起，它将为您提供

超负荷的分辨率

，因为您仍然找不到这个问题的答案，没关系，您可以先使用图像，因为您的步骤是实现

如何从图像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

文件：

注:

---

如果你想知道为什么我会给出

self.assignImageBase64（dataUrl）

这个函数最后，这是因为我仍然想知道onload是如何工作的，以及如何将

Base64

url返回到父函数，这就是为什么我只是在另一个函数中再次分配它，因为这样做更容易。

这个变量

image\u url

里面是什么？如果是URL字符串（类似

https://mypage.io/image.png

）然后将其转换为base64需要您首先通过AJAX调用获取其内容，然后将该blob转换为base64。@JanMadeyski感谢您的回复，很抱歉我忘了提及它，在变量

image\u url

中，它是我从服务器获取的一个图像文件（外部图像文件），并且它似乎

btoa（）

只更改字符串，而不更改文件本身

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