Javascript 下载画布上绘制的图像时出现的问题

Javascript代码：

HTML:

我可以从画布在div上显示图像，但当我尝试使用上面的javascript函数下载图像时，它会下载空白图像。我想知道如何从画布上画出这幅画。

试试看这里：

您可能面临的最大问题是，您只能将图像保存在与包含canvas元素的页面相同的服务器上。然后，您必须检索保存的映像（服务器端或客户端），并提示用户保存它

编辑：

也许这会更好，不过您需要一点服务器端代码： 试试看这里：

您可能面临的最大问题是，您只能将图像保存在与包含canvas元素的页面相同的服务器上。然后，您必须检索保存的映像（服务器端或客户端），并提示用户保存它

编辑：

也许这会更好，不过您需要一点服务器端代码：

---

我不希望出现用户必须右键单击图像才能保存图像的情况。我发布的代码会自动将图像下载到本地计算机。问题是我没有得到图像。我得到的只是空白图像。当我运行代码时，画布还是空白的（请参阅）。这可能与上述链接中的“同一服务器”策略有关。我不希望出现用户必须右键单击图像才能保存图像的情况。我发布的代码会自动将图像下载到本地计算机。问题是我没有得到图像。我得到的只是空白图像。当我运行代码时，画布还是空白的（请参阅）。这可能与上述链接中的“同一服务器”策略有关。

window.onload = function () {
var canvas=document.getElementById("can");
var img=canvas.toDataURL("image/png");
var button = document.getElementById('saveImage');

    img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
                'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
               '9TXL0Y4OHwAAAABJRU5ErkJggg==';
    button.onclick = function () {
    window.location.href = img.replace("image/png", "image/octet-stream");
    window.location.href = prev;
             };
     };

<canvas id="can" width="500" height="200"></canvas><br />
<input type="button" value="Done" id="saveImage">