質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.35%

  • JavaScript

    11222questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    2844questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Monaca

    716questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • canvas

    192questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

  • ダウンロード

    24questions

    リモートシステムからローカルシステムへとデータを受信する事、もしくはそのようなデータ転送を行う事をダウンロードと呼びます。

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

解決済

回答 1

投稿 2017/12/08 02:00

  • 評価
  • クリップ 0
  • VIEW 83

前提・実現したいこと

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

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

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

該当のソースコード

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
    $(".file").change(function() {
        var inputFiles = this.files;
        if(inputFiles == undefined || inputFiles.length == 0) return;

        var reg=new RegExp("\\d+$","g");
        var num=reg.exec(this.id);
        var reader = new FileReader();
        reader.addEventListener('load', function(){
            var img=$(new Image());
            img.load(function(){
                var canvas = document.getElementById("canvas"+num);
                var c = canvas.getContext("2d");
                c.drawImage(this, 0, 0, canvas.width, canvas.height);
            });
            img.attr("src",reader.result);
        })
        reader.readAsDataURL(inputFiles[0]);
            document.getElementById('file1').addEventListener('change', loadImg, false);

    });
});
    </script>
    <script>
        function loadImg(e){

        var reg=new RegExp("\\d+$","g");
        var num=reg.exec(this.id);

    var file = e.target.files[0];
    var imgA = new FileReader();
    imgA.onload = function(e){
        var imgB = new Image();
        imgB.onload = function(){
            if(num == 1){
            var ctx = document.getElementById('canvas1').getContext('2d');
            ctx.drawImage(imgB, 0, 0, canvas1.width, canvas1.height);
            };
        };
        imgB.src = e.target.result;
    };
    imgA.readAsDataURL(file);
}
$(function(){


    document.getElementById('file1').addEventListener('change', loadImg, false);



});
    </script>

    <script>
$(document).ready(function(){

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

    $("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");

    $("#btn-Convert-Html2Image").attr("download", "gazou.png").attr("href", newData);
    });
});
    </script>


</head>

<body>
    <div id="html-content-holder" style=" color: #ffffff; width: 450px; height: 320px; padding-left: 0px; padding-top: 10px;">
    <canvas class="canvas" id="canvas1" width='422px' height='180px' style="position:absolute; left: 24px; top: 112px; z-index: 0;"></canvas>

    <input class="file" id="file1" type="file" accept='image/*' />

            <button class="button" id="btn-Preview-Image" onClick="func()">Preview</button>
            <a id="btn-Convert-Html2Image" value="Download" download="op.png" />
            <button class="button">Donwload</button>
            </a>


    <div id="previewImage" style="width: 450px; height: 320px; margin-bottom:30px;">
    </div>

</body>

</html>

```

試したこと

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

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

より詳細な情報

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

記載していただいたコード、いくつかイベントハンドラが重複して登録されているようで(.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,
            {}
        );
    });


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

  1. 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 16:23

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.35%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11222questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    2844questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Monaca

    716questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • canvas

    192questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

  • ダウンロード

    24questions

    リモートシステムからローカルシステムへとデータを受信する事、もしくはそのようなデータ転送を行う事をダウンロードと呼びます。