时间戳

首页 > 解决方案 > 如何在 Vue.Js 中将图像 URL 从服务器（API / ImageURL）转换为 Base64

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

问题描述

我看到很多关于这个问题的参考，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

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

图像崩溃，如您所见

标签： javascriptvue.jsvuejs2

解决方案

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

您可以通过制作一个新图像并在该图像文件中来解决它，您可以添加您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 是如何工作的，以及如何将Base64url 返回给父级，这就是为什么我只是在另一个函数中再次分配它，因为它更容易做到。

推荐阅读