Javascript KineticJS画布保存到计算机按钮

我正在尝试添加一个保存按钮，它将出现在页面上，但不会出现在画布上。我尝试的每个在线示例似乎都无法正确保存画布。我想基本上让他们点击保存按钮，它或者自动下载图像，或者打开保存到我的电脑窗口，让他们重命名、移动和保存，等等。www.jsfiddle.net/dsj00qoy/16/

    <button id="save">Save as image</button>
  <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
          <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>       <script src="http://eligrey.com/demos/FileSaver.js/Blob.js"></script>
          <script src="http://eligrey.com/demos/FileSaver.js/canvas-toBlob.js"></script>
          <script src="http://eligrey.com/demos/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="https://53d4e26fadb6e09777fddd385fe78ac4b63826d5.googledrive.com/host/0B71KNg66uHaYR014NlB4b0c0ZWc/btq1.js"></script>

好消息是：

新的canvas.toBlob方法允许您将画布转换为blob，然后可以使用saveAs让用户将该blob作为映像下载到本地驱动器

坏消息是：

大多数浏览器尚未实现.toBlob和saveAs

解决办法：

Eli Grey编写了一个很棒的垫片，允许您在现有浏览器中使用toBlob+saveAs：

下面是一个使用Eli Grey垫片的示例

KineticJS实际上是画布层的固定舞台。对于KineticJS，您可以通过以下附加步骤创建一个包含所有KineticJS层的画布

从阶段创建imageURL请参见stage.toDataURL

从imageURL创建图像

创建内存画布

将创建的图像绘制到内存画布上

使用内存画布和Eli Grey的垫片，让用户按下按钮并将舞台作为图像保存到本地驱动器

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var img=新图像 img.onload=函数{ ctx.fillStyle=红色； ctx.drawImageimg，0,0； ctx.fillrect100100,50,30； } img.crossOrigin=匿名； img.src=https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png; $save.clickfunction{ canvas.toBlobfunctionblob{saveAsblob，temp4.png；}； }; 正文{背景色：象牙；} 画布{边框：1px纯红；} 拯救 /*FileSaver.js *saveAs FileSaver实现。 * 2014-08-29 * *伊莱·格雷，http://eligrey.com *许可证：X11/MIT *看https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md */ /*全球自我*/ /*jslint按位：true，缩进：4，laxbreak:true，laxcomma:true，smarttabs:true，plusplus:true*/ /*! @来源http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ var saveAs=saveAs //IE 10+本机存储 ||导航器的类型！==未定义&& navigator.msSaveOrOpenBlob&&navigator.msSaveOrOpenBlob.bindnavigator //其他人 ||功能视图{ 严格使用；

---

//IE所以我有一个.js文件，其中包含了我在html页面上用作源代码的所有画布内容。我需要将此代码与该js放在一起，还是可以将其与我的其他代码放在页面中，就像这样…我现在将我的主代码放在上面的编辑中，容器本身高于所有这些。我对处理脚本的看法太长了为了发表评论，我在回答的末尾添加了一点。干杯！这似乎仍然不起作用，使用另一个网站上的图片会有什么关系吗？我在某处看到，如果你有来自另一个网站的图片，它会破坏它或什么？我正在使用chrome，当我右键单击画布时，我可以保存它并显示它我还没有测试过右键单击和保存在IE或mozilla中是否有效，所以我想确保我使用的任何东西都是跨浏览器的。在IE和mozilla上测试后，右键单击保存图像在mozilla上有效，但在IE上无效。呃，我想我的问题是…这是因为我使用的是其他网站的图片。我将大多数图片上传到photobucket并链接它们。使用这个功能，它会一直工作，直到我添加这些图片，然后它就不再工作了。有什么方法可以解决这个问题吗？在“单击”时，函数{stage.toDataURL{callback:functiondataUrl{window.opendataUrl；}}；}，false；编辑以添加我的页面中的一些代码。在这些代码上方是画布本身和一些其他html。google drive中的js的最后一行是画布本身的我的js文件。