有没有简单的方法来让用户保存画布？

我已经尝试过这样做了几个小时，并且我尝试了所有可以在stackoverflow和其他网站上找到的解决方案，但都没有成功。有没有简单的方法来让用户保存画布？

最显着的是每个解决方案都完全或至少明显不同于彼此。像这样的wc3schools和网站似乎没有解决这个问题的默认方式。

我有这个简单的HTML文档这身搭配：

<body onload="draw();"> 

<canvas id="canvas1" width="500" height="500"></canvas> 

</body>

而这个JS-文件：

// JavaScript Document 

function draw() { 

    var canvas1 = document.getElementById('canvas1'); 

    if(canvas1.getContext) { 
     var ctx = canvas1.getContext('2d'); 

     //Here's a lot of drawing that I've removed to make everything that's relevant more readable. 

    } 
}

原来这就是我的工作，并为u可以看到我删除了画布上的所有代码，因为不需要知道保存画布的代码（请告诉我，如果是这样的话）。

我真的不在乎我保存在什么格式或者我怎么做（通过点击一个按钮我必须实现/通过右键单击画布/其他解决方案），我只想知道如何以最简单的方式做到这一点！

来源

2014-03-24 Jonatan Stenbacka

“简单”对不同的人意味着不同的事物。但是在新的浏览器标签上显示'canvas.toDataURL'并让用户右键点击保存很简单，并且适用于大多数浏览器。试图通过避免用户验证而获得“简单”的解决方案可能会违反浏览器安全性。 – markE

可能的重复[如何保存画布作为与canvas.toDataURL（）图像？]（http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas -todataurl） – Charles

我设法以相当简单的方式完成了这一切。这个简单的代码是让用户右键单击画布并保存它所需的全部内容，就像您使用其他任何图片一样。这不仅实施简单，而且我认为这是最理想的解决方案，因为这是我们通常将图片保存在互联网上的方式。

var saveImage = canvas1.toDataURL("image/png").replace("image.png", "saveImage/octet-stream"); 
window.location.href = saveImage;

“canvas1”是我要救画布的名字，和“图像/ PNG”无关，与我的代码，但我们与替换一些默认名称“saveImage /八位字节流” ，这是我的画布。

我无法真正详细解释此代码的功能，但它的工作原理！

来源

2014-03-26 10:09:55

有没有简单的方法来让用户保存画布？

回答

相关问题