Bagaimana untuk memuat turun imej dengan nama input pengguna

Question

Saya baru dalam pengekodan, terutamanya JavaScript, jadi saya memutuskan untuk meminta anda semua untuk melihat dan mungkin membantu saya mencari penyelesaian. Saya ingin memuat turun imej dengan nama yang dimasukkan oleh pengguna. Saya ingin memuat turun dan menamakan semula fail yang ditentukan pengguna dan bukannya URL yang dipratentukan (seperti yang ditunjukkan dalam contoh saya). Saya lebih suka memuat turun dari bahagian hadapan. Saya mencubanya dalam JavaScript tetapi ia tidak berfungsi...sesiapa mempunyai sebarang idea? Cubalah https://jsfiddle.net/8qj3czvg/...

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

Answer 1

Memandangkan seseorang telah mengulas, anda sepatutnya mempunyai contoh yang boleh dihasilkan semula minimum dalam aplikasi anda, anda boleh cuba mengubah suai kod dengan cara ini (perhatikan bahawa pengesahan nama tambahan mungkin diperlukan).

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();
            })
    })
})