4

我fabric.js用来在画布元素上添加和操作图像。我想将最终结果导出到图像文件（JPEG/PNG），并尝试了几种方法，但运气不佳。

第一个是使用 HTML5canvas.toDataURL回调 - 不起作用（显然这不能用跨域图像完成）。

然后我尝试将画布导出到 SVG 并使用convert实用程序：

$ convert file.svg file.png

SVG 看起来有点像这样：

<svg>
    ...
    <image xlink:href="http://example.com/images/image.png"
    style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: rgb(0,0,0); opacity: 1;"
    transform="translate(-160 -247.5)" width="320" height="495">
    </image>
    ...
</svg>

这也不起作用，大概是因为图像链接。然后我尝试下载链接的图像并将其存储在本地，将http://...image.png链接替换为/path/to/image.png. 没运气。

有没有办法做到这一点？谢谢。

更新

我已经通过使用fabric的节点模块（npm install fabric）并简单地使用fabric的画布的JSON表示（canvas.toJSON()在fabric中）来生成图像（也使用canvas模块- npm install canvas）来解决这个问题。

这是一个关于如何执行此操作的简单示例：

// import the fabric module
var fabric = require('fabric').fabric,
    fs = require('fs');

// read the fabric json data as string
// (from file, db, etc)
var jsonString = readJSON(filepath);

// create canvas with specified dimensions
// (change to match your needs)
canvas = fabric.createCanvasForNode(100, 100);

// create output file to hold the png image
output = fs.createWriteStream("/tmp/image.png")

// load the json to the canvas and
// pipe the output to the png file
canvas.loadFromJSON(jsonString, function() {
  var stream = canvas.createPNGStream();
  stream.pipe(output)
});
4

0 回答 0