将 SVG 分享到 Facebook

Question

用户自定义 SVG，当他们满意时，我想给他们提供在 Facebook 上分享图像的选项。

我知道 Facebook 不接受 SVG，因此，在阅读 this 问题后，我使用 canvg 得出以下结论：

var svgText = "<svg>" + $("#canvas2").html() + "</svg>";

canvg(document.getElementById('drawingCanvas'), svgText);

var img = document.getElementById('drawingCanvas').toDataURL("image/png");

尽管命名为 .toDataURL，但 img 并不是 URL（至少，我认为不是），而是一个超过 10,000 个字符的字符串data:image/png;base64,....

的人

如果我随后尝试允许用户在 Facebook 上共享 PNG，

window.FB.ui({
     href: "https://dna.land",
     method: 'feed',
     name: 'name',
     link: "dna.land",
     picture: img,
     caption: 'mywebsite.com',
     description: "description",
     message: "message"
}, function(response) {});

我收到的错误消息是 "the parameter href" 是必需的（我清楚地提供了...也许 img 太长并且 JSON 被截断了？），尽管我也看到我没有为 picture.

提供有效的 URL

如何在 Facebook 上分享图像数据？

如果无法使用 PNG 的原始 base 64 编码来执行此操作，我不反对将 PNG 文件临时存储在服务器上。但是，理想情况下，我只会存储 24 小时、几个月或一些较小的时间跨度，然后能够在用户 post 消失的情况下将其删除。这可能吗？

Answer 1

Despite the naming of .toDataURL, img is not then a URL (at least, I don't think it is), but a >10,000-character string that beings with data:image/png;base64,....

这正是 Data URI 的意思！并且函数名称 toDataURL() 没有误导性。

在您的情况下，您需要做的是将 Base64 编码的 图像（由数据 URI 表示）转换为文件并将其上传到某处（可能在您自己的服务器或任何云存储提供商，如 Amazon S3 或 Google 云存储），然后在 Facebook 上分享 url。

在您自己的服务器上：
如果您将它上传到您自己的服务器，那么您可以简单地通过 ajax POST 数据 URL，将其转换为图像和 return URL 的 URL那个形象。要转换 Base64 图像，您需要寻找有关如何使用后端 language/system 进行转换的具体方法。例如，要将Base64编码的图像转换成

中的文件

PHP：看看this answer
Python：看看this answer
NodeJS：看看this answer

对于任何其他后端，只需执行 Google 搜索，您应该找到执行此操作的方法。

正在上传到第三方云存储服务：
如果您想将图像上传到任何第三方服务，您可以获得 Blob object from the canvas by using Canvas.toBlob() 函数并将生成的 blob 上传到提供程序（可能通过使用 Javascript / REST API 提供被他们）。据我所知，许多流行的云存储提供商将允许您上传具有适当 MIME 类型的 blob，但您应该始终检查是否支持。

将 SVG 分享到 Facebook

Share SVG to Facebook

javascript

svg

facebook

facebook-graph-api

canvg