代码之家 › 专栏 › 技术社区 › Ashish

FabricJS:显示横幅预览

fabricjs angularjs php javascript

Ashish · 技术社区 · 6 年前

我用的是FabricJS 1.5,我只能坚持一件事。我想在点击按钮时向用户显示画布的预览,但我无法找到合适的解决方案。我想起来的一些事情是:

保存当前画布状态,然后在另一个画布上渲染
创建临时图像保存功能,然后显示此图像

但我想知道FabricJS中是否有任何特定的函数可以帮助我实现这一点。我做了一些研发,找不到任何东西,因此我没有尝试过任何东西。

1 回复 | 直到 6 年前

Durga 6 年前

使用 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'/>