javascript - 下载在 Canvas 上绘制的图像时出现问题

Question

Javascript代码:

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

HTML:

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

我能够在 Canvas 上的 div 上显示图像，但是当我尝试使用上面的 javascript 函数下载它时，它会下载空白图像。我想知道如何从 Canvas 上绘制图片。

Answer 1

尝试在这里查看:http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

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

编辑:

也许这会更好，尽管您需要一些服务器端代码: http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/