lionix-team / vue-image-markup

vue-image-markup will provide you to edit uploaded image easily and save it.
https://image-markup.lionix-team.com
96 stars 45 forks source link

How to use uploadImage(e)? #37

Open acarlstein opened 1 year ago

acarlstein commented 1 year ago

First at all, great project and nicely done. Much appreciated.

I'm trying to use uploadImage(e) but I get:

e.target is undefined

I'm not sure if e is supposed to be an URL, data, or what.

I tried with an URL but didn't work:

https://dummyimage.com/458x340/000000/9b1bdb.png

I tried with the image as base64 below but didn't work either:

const imageDefault = "data:image/png;base64,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";

Also I tried by assigning the base64 string to an image but no luck:

    const image = new Image();
    image.src = imageDefault;

I also tried to pass it as FileReader with the base64 content, but didn't work either:

    const blob = new Blob([imageDefault], {type: 'text/plain'});

    const fileReader = new FileReader();
    fileReader.readAsDataURL(blob);

Also, I tried like this:

 const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;

    // Create a new File object
    const myFile = new File([imageDefault], 'myFile.txt', { type: 'text/plain' });

    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(myFile);

    fileInput.files = dataTransfer.files;

Do anyone have some code example? Thank you.

akempes commented 10 months ago

I just ran into the same problem. For anyone who wants to load an image from an url:

const url = 'https://dummyimage.com/458x340/000000/9b1bdb.png';

fetch(url)
    .then(response => {

        // Check if the request was successful (status code 200)
        if (!response.ok) {
            throw new Error(`Failed to fetch data from ${url}`);
        }

        // Convert the response body to a Blob
        return response.blob();
    })
    .then(blob => {

        const e = {
            target: {
                files: [
                    blob,
                ]
            }
        };

        this.$refs.editor.uploadImage(e);
    });