在 JavaScript 代码点火器中下载按钮脚本不起作用

Question

我的网页上有一张图片，我已经为用户提供了编辑图片内容的选项，并在Codeigniter中使用JavaScript下载图片。 以下是下载按钮代码：

<div id="chumma" class="col-md-12">
<button id="download" type="submit" onclick="download_image()"  name="button" value="Download" class="btn btn-primary" >Download</button>
</div>
function download_image(){
var canvas = document.getElementById("imageCanvas");
image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var link = document.createElement('a');
link.download = "<?php echo $val['title']; ?>.png";
link.href = image;
link.click();
}

但这不是下载图像，而只是重新加载页面，任何人都可以告诉我这里出了什么问题，提前谢谢

Answer 1

尝试将链接插入 DOM，在单击之前，可能需要触发本机下载。

function download_image(){
var canvas = document.getElementById("imageCanvas");
image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var link = document.createElement('a');
link.download = "<?php echo $val['title']; ?>.png";
link.href = image;
document.body.appendChild(link);
link.click();
setTimeout(() => link.remove(), 0); // setTimeout just in case
}

如果存在链接在一瞬间可见的问题，您可以使用CSS隐藏链接。

编辑：没有注意到提交按钮，如果你想在JavaScript中做操作，不要使用提交按钮，因为这会向服务器发送http请求(提交表单(。如果你想在JavaScript中做动作，使用<button type="button">在表单中也可以工作(它不会提交(。