Question

我正在使用fabricjs 1.5，并且卡在1件事上。我想在单击按钮时向用户显示画布的预览，但我无法提出适当的解决方案。我想到的一些事情是：

保存当前画布状态，然后在另一个画布上呈现
创建一个临时图像保存功能，然后显示该图像

但是我想知道fabricjs中是否有任何特定功能可以帮助我实现这一目标。我做了一些研发，却找不到任何东西，因此我没有尝试任何东西。

Answer 1

使用canvas.toDataURL()获取画布的图像，并将其设置为图像源。

演示

var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Circle({radius:100,fill:'red'}))
function setPreview(){
 document.getElementById('img').src = canvas.toDataURL();
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="setPreview()">Preview</button><br>
<canvas id="c" width="200" height="200" style="border:1px solid #ccc"></canvas>
<br>
<img id='img'/>

Fabricjs：显示横幅预览

1 个答案: