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不是一个网址（至少，我认为不是），但是一个＆gt; 10,000字符的字符串与{ {1}}。

如果我尝试允许用户在Facebook上分享PNG，

data:image/png;base64,...

我得到的错误信息是＆＃34;参数href＆＃34;是必需的（我明确提供......可能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) {});太长而且JSON被截断了？），虽然我也看到我没有为{提供有效的URL {1}}。

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

如果使用PNG的原始基本64编码无法做到这一点，我不反对将PNG文件暂时存储在服务器上。但是，理想情况下，我只能存储24小时，或几个月或一段时间，然后能够删除它而不会丢失用户的帖子。这可能吗？

Answer 1

尽管命名为.toDataURL，但img不是一个URL（至少，我认为不是），而是一个带有数据的＆gt; 10,000字符的字符串：image / png; base64，.. ..

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

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

在您自己的服务器上：
如果要将其上传到自己的服务器，则可以通过ajax简单地发布数据URL，将其转换为图像并返回该图像的URL。要转换Base64图像，您需要查找有关如何使用后端语言/系统执行此操作的特定方法。例如，要将Base64编码的图像转换为

中的文件

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

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

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

将SVG分享到Facebook

1 个答案: