将 SVG 分享到 Facebook

Question

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

我知道 Facebook 不接受 SVG，因此，在阅读此问题后，我想出了以下使用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) {});

我得到的错误消息是“参数href”是必需的（我显然正在提供......可能img太长并且JSON被截断？），尽管我也看到我没有提供有效的URL为picture。

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

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

Answer 1

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

这就是Data URI 的确切含义！并且函数名称toDataURL()不会产生误导。

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

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

• PHP：看看这个答案
• Python：看看这个答案
• NodeJS：看看这个答案

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

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