Question

我正在使用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)

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

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

如何将画布绘制的已保存图像恢复为新的画布实例？

1 个答案: