スマートフォンでcanvasを画像として保存したい。

Question

JavaScriptで描写したグラフを画像として保存したいです。
パソコンにおいては以下のコードで実行できたのですが、スマートフォンの場合はボタンを押しても反応しないため、どのような方法を取るのが良いのでしょうか？

Comments

[退会済みユーザー]

ヒントをお伝えすると、スマホは 'click' じゃないですよね。

[退会済みユーザー]

アドバイスありがとうございます。
大変申し訳ないのですが、当方JavaScript初心者でして、スマホがクリックではないという事は分かるのですが、それに繋がるコードが思い浮かびません。
もう少しヒントを頂けないでしょうか？

[退会済みユーザー]

OSと、使っているブラウザを教えて下さい。
後、できればデバッグして、どう動いているか追ってってください

[退会済みユーザー]

お返事遅くなり申し訳ございません。
OSはmacを使用しており、ブラウザはGoogle Chromeになります。
また、本番環境ではherokuを利用しています。
とは言ってもデータを視覚化のためグラフを出力するだけの簡易的なものになりますが。
前述したようにブラウザでは、ボタンをクリックする事で画像の保存が出来るのでですが、スマホではこれが出来ません。
そこで何か良い方法がないかと思い質問させて頂きました。

[退会済みユーザー]

そっちじゃなくて、スマホの方のです…

[退会済みユーザー]

お手数掛けて申し訳ございません。
スマートフォンはiPhoneで、バージョンは最新のものになります。
ブラウザはGoogle Chromeを使用しております。

Answer 1

yukke_ さんの回答へのコメント：

今回の中身の構文だと、スマホでは動作しない部分があるかも

から、質問のコードを読み気づいたのですが、canvas.msBlob() が呼ばれている点はどうでしょうか。

ブラウザの切り分けは
こちらの記事（canvasの図形を画像として出力する時のブラウザ毎の処理）が参考になりそうですよ。

Answer 2

PCでは要素を触るときはclickイベントですが、スマホではtouchstartを使います。
（なお、startと言っているくらいですから、touchendなどもありますが、今回はtouchstartだけにします）

なので、touchstartに対応しているかチェックして、対応してればtouchstartを使えばいいです。

let event = window.ontouchstart === undefined ? 'click' : 'touchstart';
// 省略
button.addEventListener(event , function(){
// 以下略

Comments

[miyabi_pudding]

スマートフォンでも、clickイベントは発動します。
もしかしたら、デバイスにもよる可能性はなく無いので、
デバイスのOSなども質問者さんに聞いた方がいいかもしれません。
場合によっては、clickイベント自体は効いていても、
今回の中身の構文だと、スマホでは動作しない部分があるかも。
Blobを使っているあたり、
動作しない原因にネットワーク環境も関係していそうな気がします。

[退会済みユーザー]

なるほど、分かりました。
もう少し原因を探ってみましょう。