将FabricJS中的组/图层转换为图像答案

【问题标题】：Converting groups/layers in fabricjs to image将FabricJS中的组/图层转换为图像
【发布时间】：2018-05-11 17:15:52
【问题描述】：

我目前正在研究fabric.js 以及konva.js 和fabric.js 似乎具有不必手动实现所有选择工具的优势；然而，虽然在 konva.js 中，如何提取图层的图像“投影”是非常明显的（因为每个图层都有自己的至少一个画布），我不知道在织物中转换组是否困难。将 js 转换为图像（不是 svg！）。基本上我需要一些输出对象，我可以将其转换为一定大小的位图以进行进一步的处理步骤。

感谢您的帮助:)！

【问题讨论】：

标签： fabricjs

【解决方案1】：

因此，fabric 中的每个对象，包括对象组都带有一个 toDataUrl 方法。

在这个基本的基本示例中，我创建了一个 fabricJS 圆圈，我没有将它添加到画布中，我只是执行它自己的 dataURL 方法。在我添加比例因子以使其更大之前。

var circle = new fabric.Circle({radius: 50, fill: 'blue', stroke: 'red'});
circle.scaleX = 20;
circle.scaleY = 20;
document.getElementById('i').src = circle.toDataURL();

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<img id="i" />

【讨论】：

我们如何用它的阴影属性和描边属性制作一个特定对象的透明图像？它目前已被剪切。

【解决方案2】：

可以使用fabric内置的cloneAsImage函数：

group.cloneAsImage(image => {
    image.set({...do settings});

    canvas.add(image);
});

在此处查看更多信息：http://fabricjs.com/docs/fabric.Group.html#cloneAsImage

【讨论】：