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

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">

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

Answer 1

Try looking here: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

The biggest problem you're likely to face is that you can only save the image on the same server as the page which has the canvas element. You'll then have to retrieve that saved image (either server or client side) and prompt the user to save it.

EDIT:

Maybe this would be better, though you need a little bit of server-side code: http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/