如何下载带有用户输入名称的图像

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