Question

我需要从fabric.js

创建保存的字符串化JSON的PNG缩略图

我有一个数据库我将画布中的JSON数据保存到，但我需要从这个保存的JSON数据创建一个PNG缩略图库。

而不是在页面上创建一堆画布并做这样的事情。

canvas.loadFromJSON(JSONDATA); 
thumbImage = canvas.toDataURL('png');
$(this).attr('src', thumbImage);

我需要直接从JSON数据创建PNG。这是可能的，如果是这样我该怎么办？

Answer 1

JSON数据是FabricJS用于创建画布的一组指令。然后可以将画布转换为图像。

因此，是的，你需要创建画布，然后创建图像。

另一种方法是创建一个运行NodeJS的服务器，它可以运行FabricJS。最终你会在那里执行相同的任务 - 创建一个画布，然后生成图像。但这里的好处是，它是一个服务器进程，它会将文件直接保存到服务器，因此这项任务可以自动完成。

但是设置服务器并编写脚本来执行此任务可能比您的任务需要更多的努力 - 取决于您需要执行此操作的频率。

This post discusses how to install NodeJS and FabricJS。这将使服务器启动并运行，但您还需要编写服务器脚本。

Answer 2

你有另一种替代方法是创建一个生成画布并给它一个无显示，创建一个隐藏的画布来生成你的png，就像你可以从隐藏的内容画布生成图像。

<canvas id='c' width='150' heigh='150' style='display: none;'><canvas>

<script>
    var canvas = new fabric.Canvas('c');
    canvas.loadFromJSON(json);
    canvas.toDataURL('png');
</script>

Fabric.js直接从JSON转到PNG

2 个答案: