如何下載帶有使用者輸入名稱的圖像

Question

我是程式設計新手，特別是 JavaScript，所以我決定請你們看看，也許可以幫我找到解決方案。 我想下載帶有用戶輸入的名稱的圖像。 我希望下載並重新命名用戶指定的文件，而不是預先定義的 URL（如我的範例所示）。 我更喜歡從前端下載。我在 JavaScript 中嘗試，但不起作用......有人有想法嗎？試試看 https://jsfiddle.net/8qj3czvg/...

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

Answer 1

正如有人已經評論過的那樣，您應該在應用程式中擁有一個最小的可重現範例；除此之外，您可以嘗試以這種方式修改程式碼（請注意，可能需要額外的名稱驗證）。

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