Monacaでcanvasに画像を読みこんで表示し、Android実機に表示された画像を保存したい

###前提・実現したいこと
現在、Monacaを使ってスマホアプリを作ろうとしています。
canvasに画像を読みこんで表示し、previewをタップ後、
downloadをタップすると、表示された画像が
スマホにダウンロードされるようにしたいと思っています。

MonacaのWebブラウザ上のプレビュー画面では、
画像のcanvasへの読みこみと表示された画像のダウンロードができますが、
Android実機のMonacaデバッガーでは、
画像のcanvasへの読みこみとダウンロードができません。
Android実機でもWebブラウザ上と同様に
画像の読み込みとダウンロードができるようにしたいのですが、
どうしたらいいでしょうか。
よろしくお願いします。

###発生している問題・エラーメッセージ

###該当のソースコード

html
1    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
2    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
3    <script>
4        $(document).ready(function(){
5    $(".file").change(function() {
6        var inputFiles = this.files;
7        if(inputFiles == undefined || inputFiles.length == 0) return;
8
9        var reg=new RegExp("\d+$","g");
10        var num=reg.exec(this.id);
11        var reader = new FileReader();
12        reader.addEventListener('load', function(){
13            var img=$(new Image());
14            img.load(function(){
15                var canvas = document.getElementById("canvas"+num);
16                var c = canvas.getContext("2d");
17                c.drawImage(this, 0, 0, canvas.width, canvas.height);
18            });
19            img.attr("src",reader.result);
20        })
21        reader.readAsDataURL(inputFiles[0]);
22            document.getElementById('file1').addEventListener('change', loadImg, false);
23
24    });
25});
26    </script>
27    <script>
28        function loadImg(e){
29            
30        var reg=new RegExp("\d+$","g");
31        var num=reg.exec(this.id);
32            
33    var file = e.target.files[0];
34    var imgA = new FileReader();
35    imgA.onload = function(e){
36        var imgB = new Image();
37    	imgB.onload = function(){
38            if(num == 1){
39			var ctx = document.getElementById('canvas1').getContext('2d');
40			ctx.drawImage(imgB, 0, 0, canvas1.width, canvas1.height);
41            };
42		};
43		imgB.src = e.target.result;
44	};
45	imgA.readAsDataURL(file);
46}
47$(function(){
48
49
50	document.getElementById('file1').addEventListener('change', loadImg, false);
51
52
53
54});
55    </script>
56
57    <script>
58$(document).ready(function(){
59    
60var element = $("#html-content-holder"); // global variable
61var getCanvas; // global variable
62 
63    $("#btn-Preview-Image").on('click', function () {
64         html2canvas(element, {
65         onrendered: function (canvas) {
66                $("#previewImage").append(canvas);
67                getCanvas = canvas;
68             }
69         });
70    });
71
72    $("#btn-Convert-Html2Image").on('click', function () {
73    var imgageData = getCanvas.toDataURL("image/png");
74    // Now browser starts downloading it instead of just showing it
75    var newData = imgageData.replace(/^data:image/png/, "data:application/octet-stream");
76
77    $("#btn-Convert-Html2Image").attr("download", "gazou.png").attr("href", newData);
78    });
79});
80    </script>
81
82
83</head>
84
85<body>
86    <div id="html-content-holder" style=" color: #ffffff; width: 450px; height: 320px; padding-left: 0px; padding-top: 10px;">
87    <canvas class="canvas" id="canvas1" width='422px' height='180px' style="position:absolute; left: 24px; top: 112px; z-index: 0;"></canvas>
88
89    <input class="file" id="file1" type="file" accept='image/*' />
90
91            <button class="button" id="btn-Preview-Image" onClick="func()">Preview</button>
92            <a id="btn-Convert-Html2Image" value="Download" download="op.png" />
93            <button class="button">Donwload</button>
94            </a>
95
96
97    <div id="previewImage" style="width: 450px; height: 320px; margin-bottom:30px;">
98    </div>
99
100</body>
101
102</html>


###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答1件

ベストアンサー

記載していただいたコード、いくつかイベントハンドラが重複して登録されているようで(.fileクラス属性とfile1 ID属性でそれぞれchangeを定義していたり、onClickとon('click',...)が両方定義されていたりなど）、いくつか修正して確認してみました。

Android実機でのCanvasへの書き込みは、正常に動作しました。もしかすると、上記のイベントハンドラが重複して登録されていることが原因かもしれないので、コードを確認してみてください。また、自分はAndroid 6.0.1で確認しました。他のバージョンだと、違う結果になるかもしれません。

また、download属性を利用してダウンロードは出来ませんでした。多分これは、WebViewの設定になるので、Monaca/Cordovaでは出来ないのだと思います。

なので、代替案としてFileTransferプラグインを使ってはいかがでしょうか？

この場合、ダウンロード先はAndroidのダウンロードディレクトリではなくて、指定したディレクトリになるため、ブラウザで普通にダウンロードするのとはちょっと勝手が違ってしまいますが、、。

また、Android限定であれば、ダウンロード先をAndroidのダウンロードディレクトリにしたい場合は、

    var uri = encodeURI(newData); //encodeURI("https://ja.monaca.io/img/index/img_1.jpg");
    var fileURL = cordova.file.externalRootDirectory + "Download/img_1.jpg";

    var fileTransfer = new FileTransfer();
        fileTransfer.download(
            uri,
            fileURL,
            function(fileSyatem) {
                console.log("toURL=" + fileSyatem.toURL());
                console.log("nativeURL=" + fileSyatem.nativeURL);
                console.log("toInternalURL=" + fileSyatem.toInternalURL());
            },
            function(error) {
                console.log("download error source " + error.source);
                console.log("download error target " + error.target);
                console.log("download error code " + error.code);
            },
            false,
            {}
        );
    });

こんな感じのコードになると思いますが、二点問題があります

Cordova 6以上だと、アプリのStorageを許可しないと、permissionエラーで保存出来ない。

=> Monacaデバッガーであれば、Androidの設定 => アプリ => MonacaDebugger => 許可 => ストレージを許可
とすれば、保存できるようになります。
2. Androidのデフォルトのダウンロードマネージャでは、保存されたファイルが見れない。
=> Astroファイルマネージャのようなサードパーティのものであればみれますが、、。Androidのデフォルトのダウンロードマネージャだと、ただ単にfile:///storage/emulated/0/Downloadにファイルを置いただけでは認識しないみたいです。これを解決するには、プラグインを改修するしかないように思います。
おそらく、
https://stackoverflow.com/questions/28183893/how-to-store-files-generated-from-app-in-downloads-folder-of-android
のような対応が必要になると思います。

投稿2017/12/13 07:23