Fabricjs：显示横幅的预览

Posted 2023-03-25

【中文标题】Fabricjs：显示横幅的预览

【英文标题】：Fabricjs: Show preview of the banner

【发布时间】：2018-12-03 15:27:18

【问题描述】：

我正在使用fabricjs 1.5，但我被困在一件事上。我想通过单击按钮向用户显示画布的预览，但我想不出一个合适的解决方案。我想到的一些事情是：

保存当前画布状态，然后在另一个画布上渲染

创建临时图像保存功能，然后显示此图像

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

【问题讨论】：

更新到新版本，1.5 太旧了。您可以使用canvas,toDataURL() 获取画布图像。

所以使用图片是最好的选择。

是的，使用toDataURL()

【参考方案1】：

使用canvas.toDataURL()获取canvas的图片，并设置为图片源。

演示

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"   style="border:1px solid #ccc"></canvas>
<br>
<img id='img'/>