如何将已保存的画布绘图图像恢复到新的画布实例中？答案

【问题标题】：How can I restore a saved image of a canvas drawing into a new canvas instance?如何将已保存的画布绘图图像恢复到新的画布实例中？
【发布时间】：2014-10-24 13:14:05
【问题描述】：

我正在使用sketch.js http://intridea.github.io/sketch.js/，因此用户可以在我的应用程序中创建绘图。一旦他们完成绘图，然后单击保存，我使用此功能将绘图转换为 png 图像：

convertCanvasToImage = (canvas) ->
  image = new Image()
  image.src = canvas.toDataURL("image/png")
  image

然后我只是将图像附加到 DOM。

但是如果用户想在之后编辑绘图怎么办？如何获取该图像并将其添加到sketch.js 使用的画布中？

我尝试了以下失败的结果。当您单击 png 图像时，我运行此代码以尝试将图像附加到画布，但它似乎根本不起作用。画布处于模态，一旦出现，我运行以下代码将图像附加到画布，但没有图像出现。

template.$('#sketchModal').on 'shown.bs.modal', (e) ->
  c = document.getElementById("sketchPad")
  ctx = c.getContext("2d")
  ctx.drawImage(e.target, 0, 0)

【问题讨论】：

仅仅在画布上重新绘制图像是行不通的，因为sketch.js首先需要知道创建图像的所有绘图命令和样式设置。我快速浏览了 GitHub 上的源代码，但没有看到任何保存/恢复 SketchJS 绘图的方法。 :-(
是的，我知道我还没有找到解决方案/破解方法
抱歉，好像没有办法。由于 SketchJS 必须重新加载绘图命令和样式，我认为这样做的唯一方法是保存所有命令和样式，然后在您想要恢复时将其全部加载。

标签： javascript html canvas html5-canvas

【解决方案1】：

之前没用过sketch js，看到这段代码我有了一个想法

<div class="tools">
  <a href="#tools_sketch" data-tool="marker">Marker</a>
  <a href="#tools_sketch" data-tool="eraser">Eraser</a>
</div>
<canvas id="tools_sketch" width="800" height="300" style="background: url(http://farm1.static.flickr.com/91/239595759_3c3626b24a_b.jpg) no-repeat center center;"></canvas>
<script type="text/javascript">
  $(function() {
    $('#tools_sketch').sketch({defaultColor: "#ff0"});
  });
</script>

您不想将图像附加到画布中，而是将其添加为背景。试试看，如果有效，请告诉我。

【讨论】：

我考虑过这一点，但并没有真正实现能够编辑绘图的能力。您仍然无法擦除绘图的某些部分，因为它是背景图像。它只是让您看起来像是在旧图纸之上绘制。但是，当您将新画布转换回图像时，它只是顶部的图层。所以这个解决方案不起作用。我真正要找的是将 png 转回画布绘图，以便可以将其擦除。
当您说它不起作用时，控制台有帮助吗？你有什么错误吗？
嗨近点。请在这里查看我的答案>>stackoverflow.com/questions/17939462/…