Блог

Я вижу много ссылок на эту проблему, 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)}`;
},
  

Я прочитал некоторые с помощью file Reader, но разве это не только для файла, когда вы загружаете данные с помощью input ? может кто-нибудь помочь мне решить эту проблему? Я использую Vue.Js для фреймворка

когда я использовал этот метод, я получил такой результат:

Итак, это мой ответ для моего будущего «я», который может забыть и снова наткнуться на эту проблему!

Вы можете решить эту проблему, создав новое изображение, и внутри этого файла изображения вы можете добавить свой 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-адрес родительскому, поэтому я просто назначаю его снова в другой функции, поскольку это проще сделать.