Monacoにて端末ストレージ内の画像表示に関して

Question

前提・実現したいこと

初心者ですがご教授いただきたいです。

Monacoにて端末に保存されている画像を表示して、落書きしたりスタンプができたりする子供向けアプリを作りたいと考えています。

早速というか初期段階？の画像表示が2～3日検索しているのですが解りません。

Monaco Docsという所も見て色々試してみたのですがお手上げ状態です。

どうかよろしくお願い致します。

一応スマホ端末はAndoroidになります。

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

初歩的なご質問かもしれませんが、どこか解りやすく参考になるサイトなどでの紹介やヒントでも構いませんで、よろしくお願い致します。

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

もう出来てるかもしれませんが、画像ファイル選択して表示するなら

<template>
<template>
    <v-ons-page>
      <input type="file" accept="image/jpeg,image/png" id="photo" @change="onFileChange" />
      <img src="" id="image" width="200" :src="uploadedImage" />
    </v-ons-page>
</template>
<script>
  export default{
    data() {
      return {
        uploadedImage: null
      };
    },
    methods: {
      onFileChange(e) {
        const files = e.target.files || e.dataTransfer.files;
        this.createImage(files[0]);
      },
      createImage(file) {
        const reader = new FileReader();
        reader.onload = e => {
          this.uploadedImage = e.target.result;
        };
        reader.readAsDataURL(file);
      },
    }
  };
</script>

こんな感じになります＆MonacaDebuggerで確認。(VueTemplate使用)

参考サイトは
Monacaで画像アップロード/ダウンロードを行うには

Comments

[kanzakidesu]

ご教授有難う御座います。

現在なんとなくできているのですが、大変勉強になります。

本当に本当に有難う御座います。

今後も何かとご質問するとおもいますが、よろしくお願い致します。