javascript - 将 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) {});

我收到的错误消息是“需要参数 href”(我清楚地提供了......也许 img 太长并且 JSON 被 chop 了？)，虽然我有还看到我没有为 picture 提供有效的 URL。

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

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

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 或谷歌云存储)，然后在 Facebook 上分享该网址。

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

• PHP:查看 this answer
• Python:查看 this answer
• NodeJS:查看 this answer

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

上传到第三方云存储服务:
如果您想将图像上传到任何第三方服务，您可以获得Blob使用 Canvas.toBlob() 从 Canvas 中删除对象函数并将生成的 blob 上传到提供者(可能通过使用他们提供的 Javascript/REST API)。据我所知，许多流行的云存储提供商将允许您上传具有适当 MIME 类型的 blob，但您应该始终检查是否支持。