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はimgURL ではなく (少なくとも、そうではないと思います)、 で構成される 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 ではなく (少なくとも、そうではないと思います)、data:image/png;base64,... で構成される 10,000 文字を超える文字列です。

これがまさにデータ URIの意味です。関数名toDataURL()は誤解を招くものではありません。

あなたの場合、Base64 でエンコードされたイメージ (データ URI で表される) をファイルに変換し、どこかにアップロードする必要があります (おそらく、独自のサーバーまたは Amazon S3 や Google Cloud Storage などのクラウド ストレージ プロバイダー)。 )、その URL を Facebook で共有します。

独自のサーバー上: 独自のサーバー
にアップロードする場合は、Ajax 経由でデータ URL を POST し、それを画像に変換して、その画像の URL を返すことができます。Base64 イメージを変換するには、バックエンド言語/システムでそれを行う方法について特定の方法を探す必要があります。たとえば、Base64 でエンコードされた画像をファイルに変換するには

他のバックエンドについては、Google 検索を実行するだけで、その方法を見つけることができます。

サードパーティのクラウド ストレージ サービスへのアップロード:
画像をサードパーティのサービスにアップロードする場合は、Canvas.toBlob()関数を使用してキャンバスからBlobオブジェクトを取得し、結果の BLOB をプロバイダーにアップロードします (おそらく彼らが提供するJavascript / REST APIを使用して）。私の知る限り、多くの一般的な Cloud Storage プロバイダーでは、適切な MIME タイプの BLOB をアップロードできますが、常にサポートを確認する必要があります。

于 2017-06-10T07:33:26.013 に答える