如何将保存的画布图形图像恢复到新的画布实例中

How can I restore a saved image of a canvas drawing into a new canvas instance?

本文关键字：布实例 实例 图形图像 保存 恢复      更新时间：2023-09-26

我使用的是sketch.jshttp://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，但看到这段代码，我想到了

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

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

相关文章：