HTML5 動的に生成した画像ファイルをSNSでシェアする方法

Question

下記を参考にdrawImageを使用した後、
https://blog.katsubemakito.net/html5/canvas-concat

動的にjpgファイルを生成しています

//
var displaySrc = ctx.canvas.toDataURL('image/jpeg', .9);
pic.src = displaySrc;

この画像をSNS（Twitter、Facebook、Instagram、LINE）でシェアしたいと考えているのですが
画像が動的に生成され、ページを閉じると消えてしまうものなので、HTMLファイルだけで実現するのは難しいでしょうか。

画像はサーバにアップロードしておく必要があるのでしょうか。。

動的に生成した画像をSNSでシェアする方法があれば情報を頂きたく。。よろしくお願いいたします。

Comments

[m.ts10806]

html5ではなくJavaScriptでは

Answer 1

画像はサーバにアップロードしておく必要があるのでしょうか。。

そうですね、いちおうData URI Schemeというものがあって画像データをURLに詰め込むことは可能ですが、現実問題として共有するには長すぎるURLができますし、そもそもData URI Schemeの共有に対応していないプラットフォームが大半かと思います。

Comments

[Qoo]

回答ありがとうございます
ちなみにサーバに画像をアップロードことで、webから画像にアクセスできるURLができるからということは理解できるのですが、一般的にそういった意味でしょうか。
画像そのものをアップロードする場合はsns側のapiを通じてsns側にアップロードする必要があるということなのでしょうか。。

[maisumakun]

> 画像そのものをアップロードする場合はsns側のapiを通じてsns側にアップロードする必要があるということなのでしょうか。。

そうとは限りません。自分のサーバに置くような形にしても、（そこへ外部からアクセスできるような状態になっているなら）問題ありません。

[Qoo]

回答ありがとうございます！
>外部からアクセスできるような状態になっているなら
という部分はURLリンクを共有するという意味ではないのでしょうか。
リンクを共有しなのだったら、SNS側にアップロードする必要があるのですよね？

Answer 2

この画像をSNS（Twitter、Facebook、Instagram、LINE）でシェアしたい

「シェア」というのはどういう意味ですか？

画像ファイルを .jpg とか .png として入手し、Twitter などにアップロードしたいということですか？

クライアント側の話であれば、pic.src = displaySrc;（Data URL 形式で画像データが得られるはず）としてブラウザ上の img 要素に表示された画像を右クリックでダウンロードして PC のフォルダに保存するという話になると思います・・・が、そんな単純な話ではなさそうですね。

サーバー側の話で、pic.src = displaySrc; でブラウザに表示された画像をサーバーにアップロードしてサーバー側のどこかに画像ファイルとして保存したいということですか？

そうであれば、以下の記事に jQuery.ajax を利用してサーバーに画像データをアップロードし、サーバー側では ASP.NET の Web サービスでそれを受けて保存するという例が書いてありますが、それは参考になりませんか？

アップロードする JavaScript / jQuery のメソッドは uploadImage を、それを受ける Web サービスのメソッドは ReceiveImage を見てください。

canvas の画像をアップロード
http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

上記のいずれともやりたいことは違うということなら、もっと詳しく何がしたいのかを書いてください。

＃ところで、本スレッドの話とは関係ないですが、質問者さんの先のスレッドの canvas の画像を回転させる件は解決したのでしょうか？

Comments

[Qoo]

回答ありがとうございます

画像ファイルを .jpg とか .png として入手し、Twitter などにアップロードしたいということですか？

はい、そのとおりです。
Twitterなどに投稿する方法としてはページリンクを投稿する方法とファイルを直接アップロードする方法と2種類考えられると思うのですが、
下記の方法でローカルやサーバにデータがない状態ですが、一時的なデータとしてキャッシュにはあると思ったので、このまま右クリックやサーバにアップロードせずに直接、Twitterなどに投稿できないのかなと思った次第です。

var displaySrc = ctx.canvas.toDataURL('image/jpeg', .9);
pic.src = displaySrc;

現在、ajaxを使用してサーバにアップロードする方法を作って試そうと思っているのですが
結局アップロードしたとしても、URLリンクページを投稿するわけではなく
画像のみをTwitterに投稿するにはTwitterのAPIに投げるしかないのか
他に方法があるのかが知りたいところでした。

知識が浅く、へんなことを言ってるかもしれませんが
ご回答頂ければ嬉しいです。

[退会済みユーザー]

自分は Twitter しか使ってないのでその場合しか分かりませんが・・・

> ページリンクを投稿する方法

それは、記事を書くまたは返信するとき、記事の本文中に画像ファイルへの URL を書くことになると思いますが、その URL に画像ファイルが無いと何ともならない（質問の話のような「一時的なデータとしてキャッシュ」ではダメ）と思います。

> ファイルを直接アップロードする方法

それは、記事を書くまたは返信するとき、画像アイコンをクリックして自分の PC のフォルダから画像ファイルを選択してアップロードするということになると思いますが、そうするには上の私の回答に書いた「クライアント側の話」のように画像ファイルを自分の PC ダウンロードしてないと何ともならないかと思います。

> 現在、ajaxを使用してサーバにアップロードする方法を作って試そうと思っているのですが結局アップロードしたとしても、URLリンクページを投稿するわけではなく

アップロードできれば、その画像を Web サーバーの仮想ディレクトリに置くことができるはずで、そこへの URL をブラウザのアドレスバーに入力すれば画像はブラウザに表示できるのではないですか？　であれば、上の「ページリンクを投稿する方法」で目的は果たせるのではないですか？

[Qoo]

とても良く理解できました。ありがとうございます！
現在asp側のスクリオプトができてサイズが小さければ問題ないのですが、
大きいファイルサイズだとエラーになる問題が発生しております。
こちらで別の質問として投稿しました。
可能であればこちらも見て頂けると嬉しいです。

https://teratail.com/questions/222057

[Qoo]

前後して申し訳無いのですが、canvasの画像回転はまだ解決していません。
とりあえずあらかじめ回転しておいた画像を用意しておき、
縦持ち、横持ちを判断してどちらかを読み込むようにしています。
根本的な解決はしていないのでこちらも知識を得たいのですが、
私の頭がおいついておらず目先の課題を優先してしまっています。
いろいろとアドバイス頂き、また気にかけて頂きありがとうございます。