Question

我正在使用fabric.js在canvas元素上添加和操作图像。我想将最终结果导出到图像文件（JPEG / PNG），并尝试了几种方法，没有太多运气。

第一个是使用HTML5 canvas.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）解决了这个问题，并简单地使用了画布的结构JSON表示（在结构中canvas.toJSON()）来生成图像（也使用canvas模块 - { {1}}）。

以下是一个如何执行此操作的简单示例：

npm install canvas

如何将SVG与图像链接转换为PNG / JPEG？

更新

0 个答案: