Comment télécharger une image avec le nom saisi par l'utilisateur

Question

Je suis nouveau dans le codage, en particulier en JavaScript, j'ai donc décidé de vous demander d'y jeter un œil et peut-être de m'aider à trouver une solution. Je souhaite télécharger une image avec un nom saisi par l'utilisateur. Je souhaite télécharger et renommer un fichier spécifié par l'utilisateur au lieu d'une URL prédéfinie (comme indiqué dans mon exemple). Je préfère télécharger depuis le frontend. Je l'ai essayé en JavaScript mais ça ne marche pas... quelqu'un a des idées ? Essayez-le https://jsfiddle.net/8qj3czvg/...

[https://jsfiddle.net/8qj3czvg/][1]

Answer 1

Comme quelqu'un l'a déjà commenté, vous devriez avoir un exemple minimal reproductible dans votre application ; au-delà de cela, vous pouvez essayer de modifier votre code de cette manière (notez qu'une validation de nom supplémentaire peut être requise).

HTML :

<form>
    <input type="text" id="file-name" class="form-control form_style" placeholder="Enter Name">
</form>

Js：

$(document).ready(function() {
    $('.is-hidden').click(function() {
        domtoimage
            .toPng(document.getElementById('content'), {
                quality: 0.95
            })
            .then(function(dataUrl) {
                let link = document.createElement('a');
                let name = document.getElementById('file-name').value;
                name = name ? name : "placeHolderName"; // checks whether the user has entered a file name
                link.download = `${name}.jpeg`;
                link.href = dataUrl;
                link.click();
            })
    })
})