将 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（至少我不这么认为），而是一个与data:image/png;base64,... 存在的>10,000 个字符的字符串。

如果我随后尝试允许用户在 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) {});

我得到的错误消息是“参数href”是必需的（我清楚地提供了......也许img太长并且JSON被截断了？），虽然我也看到了我' m 没有为 picture 提供有效的 URL。

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

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

Answer 1

尽管命名为 .toDataURL，但 img 并不是一个 URL（至少，我不这么认为），而是一个包含数据的大于 10,000 个字符的字符串：image/png;base64,... .

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

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

在您自己的服务器上：
如果您将其上传到您自己的服务器，那么您只需通过 ajax 发布数据 URL，将其转换为图像并返回该图像的 URL。要转换 Base64 图像，您需要寻找如何使用后端语言/系统进行转换的具体方法。例如，将Base64编码的图像转换为文件

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

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

上传到第三方云存储服务：
如果您想将图像上传到任何第三方服务，您可以使用Canvas.toBlob() 函数从画布中获取Blob 对象并将生成的blob 上传到提供程序（可能通过使用由他们）。 AFAIK，许多流行的云存储提供商将允许您上传具有适当 MIME 类型的 blob，但您应该始终检查支持。