5

用户自定义 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 小时、几个月或一小段时间，然后能够在用户帖子不消失的情况下将其删除。那可能吗？

4

1 回答 1

1

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

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

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

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

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

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

于 2017-06-10T07:33:26.013 回答