下载按钮不下载javascript中的图像

我有一个html画布，其中的图像是从数据库显示，用户可以添加动态文本到图像和下载输入的文本图像。以下是我的代码：

下载
var text_title=“Heading”；
var canvas=document.getElementById（'imageCanvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
//img.crossOrigin=“匿名”；
window.addEventListener（'load'，DrawPlaceholder）
函数DrawPlaceholder（）{
img.onload=函数（）{
绘图覆盖（img）；
DrawText（文本和标题）；
动态文本（img）
};
img.src='uploads/'；
}
var canvas=document.getElementsByTagName（'canvas'）[0]；
画布宽度=500；
高度=500；
功能绘图覆盖（img）{
ctx.drawImage（img，0，0，img.width，img.height，0，0，canvas.width，canvas.height）；
ctx.fillStyle='rgba（230,14,14,0）'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
}
函数DrawText（文本）{
ctx.fillStyle=“黑色”；
ctx.textb基线='中间'；
ctx.font=“50px‘蒙特塞拉特’”；
ctx.fillText（文本，50,50）；
}
函数动态文本（img）{
document.getElementById（'name'）。addEventListener（'keyup'，function（）{
clearRect（0，0，canvas.width，canvas.height）；
绘图覆盖（img）；
text_title=this.value；
DrawText（文本和标题）；
});
}
函数下载_image（）{
var canvas=document.getElementById（“mcanvas”）；
image=canvas.toDataURL（“image/png”）.replace（“image/png”、“image/octet-stream”）；
var link=document.createElement（'a'）；
link.download=“my image.png”；
link.href=图像；
link.click（）；
}

默认情况下，在表单中放置按钮时，按钮上的单击事件将使表单提交。你必须阻止它发生

使用此方法，而不是使用

onclick=download\u image（）

user此方法

---

另一个解决方案

dev consol？@SimoneRossaini中的任何错误都是

$\u GET['editid']

来自？@FunkFortyNiner其url，图像位于数据库中。图像显示正常，但下载按钮不工作正常。现在我明白了问题所在。此

$image['image']

<结尾处有空格。这些需要删除

$image['image']

。空格“计数”。在它之前还有其他的。

 document.getElementById('download').addEventListener('click', function(e){
      e.preventDefault();
      download_image()
 });