JavaScriptで編集加工した結果の画像データをローカルにダウンロードする方法はありますか？

Question

以下のWebページは、写真をJavaScriptライブラリ「CamanJS」で加工して表示しています。
https://ok2nd.sakura.ne.jp/tool/camanjs/preset-examples.html

加工結果はPNGになるようですが、PCではマウスの右クリックで加工結果のPNGを保存できます。

スマホ(Android)では、「Original」(JPEG)は画像の長押しで保存できますが、「Original」以外は、画像の長押しをしても保存選択画面が出ません。

PC、スマホを含めて、写真をクリック（タッチ）したら、保存メニューなどを表示して、加工結果のPNGをローカルに保存できるような仕組みにすることはできますか？

以下、該当部分のコード抜粋です。

<div class="content"> <figure><img id="oldBoot" src="images/moto1-400.jpg"><figcaption>Old Boot</figcaption></figure> </div> <script> Caman("#oldBoot", function () { this.oldBoot().render(); }); </script>

Comments

[m.ts10806]

URLだけだと宣伝目的にも捉えられるので、現在のコードを提示されたほうが良いと思います。

[m.ok.2nd]

該当する部分のコードを抜粋しました。

<div class="content">
<figure><img id="oldBoot" src="images/moto1-400.jpg"><figcaption>Old Boot</figcaption></figure>
</div>

<script>
Caman("#oldBoot", function () {
this.oldBoot().render();
});
</script>

[int32_t]

可能だと思いますが、何がわかりませんか? 「写真をクリックしたら何かをする方法」「保存メニューのようなものを表示する方法」「加工結果からPNGを生成する方法」「生成したPNGを保存させる方法」など。

[m.ok.2nd]

「保存メニューのようなものを表示する方法」と「実際に編集結果を保存する方法」が知りたいです。
少し試してみたりしましたが、編集前の元画像しか保存できなかったりしました。

Answer 1

Androidのテスト環境がないので何とも言えませんが、保存する部分はこれでどうでしょうか。

var a = document.createElement('a');
a.href=document.getElementById('oldBoot').toDataURL('image/png')
a.download ='oldBoot.png';
a.click();

あとは、クリックイベントを拾えば何とかなりそうな……？

Comments

[m.ok.2nd]

Lhankor_Mhyさん、ありがとうございます。
実はその方法は、以下のような感じで以前試しました。
Caman("#oldBoot", function () {
this.oldBoot().render();
let a = document.createElement("a");
a.href = this.toBase64();
a.download = Date() +"_image.png";
a.click();
});
PCでテストすると、教えていただいた方法もですが、PNGは保存されますが、画像加工する前の写真イメージがPNGになったものがダウンロードされるだけです。画像加工したものが保存されません。

[Lhankor_Mhy]

試したことは書いてほしいんですよね……

ドキュメントを見ると、thisにはオリジナルの画像が入ってそうな感じなので、this を使うのをやめた方がいいと思いますよ。

[m.ok.2nd]

すみません。理解できていないのですが。
Caman("#oldBoot", function () {
this.oldBoot().render();
var a = document.createElement('a');
a.href=document.getElementById('oldBoot').toDataURL('image/png')
a.download ='oldBoot.png';
a.click();
});
としても、画像加工する前のものしか保存されないのですが。
私が、何か勘違いしていますか？

[Lhankor_Mhy]

なるほど、もしかすると、render() が非同期なのかもしれないですね。
コールバックで実行してみてはどうでしょうか？

[Lhankor_Mhy]

ドキュメントを見ていたら、browserSave() というそのまんまっぽいメソッド名を見つけてしまったのですが……

[m.ok.2nd]

Lhankor_Mhyさん

確かに非同期ですね。

ネットでググって、以下を試しました。加工結果が保存されました。

Caman("#oldBoot", function () {
this.oldBoot();
this.render(function() {
var a = document.createElement('a');
a.href=document.getElementById('oldBoot').toDataURL('image/png')
a.download ='oldBoot.png';
a.click();
});
});

ありがとうございました。
今は、ページを表示するとその時点でダウンロードされてしまいますので、各フィルタ画像毎にクリックイベントを拾うなどの処理が必要と思いますが、とりあえず、加工結果が保存できてよかったです。

重ねて、ありがとうございました。

[m.ok.2nd]

画像クリックで加工画像を保存できるようにしました。
https://ok2nd.sakura.ne.jp/tool/camanjs/preset-examples-save.html
-------------------------
<img id="xxx" src="images/xxx.jpg" onclick="saveLocal(this.id)">
-------------------------
<script>
function saveLocal(id) {
if(window.confirm('「' + id + '.png」を保存しますか？')){
var a = document.createElement('a');
a.href = document.getElementById(id).toDataURL('image/png')
a.download = id + '.png';
a.click();
}
}
</script>

[m.ok.2nd]

ローカルの任意の画像をアップロードしてエフェクトをかけるWebページも作成しました。
こちらも、加工結果をローカルに保存できます。

処理はローカルのJavaScriptですべて行うので、サーバーサイドに画像が送られることはありません。

https://ok2nd.sakura.ne.jp/tool/camanjs/upload.html