canvasでローカルファイル（画像）を表示したい。

Question

//image.vue
<template>
  <div>
    <div v-for="image in layer">
      <img v-show="uploadedImage" :src="uploadedImage" />
      <input type="file" ref="file" @change="onFileChange"/>
      <el-button @click="setImage(image)">反映</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['tmp_template'],
  data() {
    return {
      uploadedImage: ""
    }
  },
  computed: {
    layer() {
      return this.tmp_template.layers.filter(function(layer) {
        if (layer.type === 'image') {
          return layer
        }
      })
    },
  },
  methods: {
    viewValue() {
      //Preview.vueの関数
      this.$emit('viewValue')
    },
    onFileChange(file) {
      const elFile = this.$refs.file
      const files = elFile[0].files[0]
      this.uploadedImage = files
    },
    setImage(image) {
      image.value = this.uploadedImage
      this.viewValue()
    }
  },
}
</script>

//preview.vue
<template>
  <div>
    <div style="width:1360px;height:250px;padding:50px;border:solid 1px #DDD;background-color:#FFFFFF;overflow:scroll">
      <canvas id="preview" :style="{
          border: 'solid 1px #000',
          'background-color': '#FFFFFF',
        }">
      </canvas>
    </div>
  </div>


</template>


<script>
export default {
  data() {
    return {}
  },
  props: ['tmp_template'],
  mounted() {
    this.ctx = this.$el.firstChild.firstElementChild.getContext('2d')
    this.drawCreative()
  },
  methods: {
//Canvas生成
    drawCreative() {
      this.ctx.canvas.width = this.tmp_template.width
      this.ctx.canvas.height = this.tmp_template.height
      this.ctx.beginPath()
      this.ctx.clearRect(0, 0, this.tmp_template.width, this.tmp_template.height)
      this.tmp_template.layers.forEach(layer => {
        this.ctx.strokeStyle = this.setTypeColor(layer.type)
        if(layer.type === 'text' && layer.value) {
          this.ctx.fillText(layer.value, layer.x_position, layer.y_position - -10)
        }
        else if(layer.type === 'image' && layer.value)
        {
　　　　　　//画像表示処理
          let image1 = new Image()
          let reader = new FileReader()
          image1.src = layer.value.name
         reader.onload = (e) => {
           this.ctx.drawImage(image1, 0, 0)
         };
          reader.readAsDataURL(layer.value);
        }
        this.ctx.strokeRect(layer.x_position, layer.y_position, layer.width, layer.height)
      })
      this.ctx.fill()
    },
  },
}
</script>

必要ないと思ったコードは割愛しています

このように処理で作っているのですが、画像が表示されません。
参考にしたサイトは下記サイトです。
エラーは出ないのですが、画像が表示されません。

リンク内容
リンク内容
リンク内容
リンク内容

追記

yhgさんの通りコードを書きましたが、エラーが表示されるようになりました。

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

//image.vue
<template>
  <div>
    <div v-for="image in layer">
      <img v-show="uploadedImage" :src="uploadedImage" />
      <input type="file" ref="file" @change="onFileChange"/>
      <el-button @click="setImage(image)">反映</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['tmp_template'],
  data() {
    return {
      uploadedImage: ""
    }
  },
  computed: {
    layer() {
      return this.tmp_template.layers.filter(function(layer) {
        if (layer.type === 'image') {
          return layer
        }
      })
    },
  },
  methods: {
    //今回追加文
    getDataURI(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader, result)
        reader.onerror = error => reject(error)
      })
    },
    viewValue() {
      //previe.vueの関数
      this.$emit('viewValue')
    },
    onFileChange(file) {
      const elFile = this.$refs.file
      const files = elFile[0].files[0]
　　　//関数代入
      this.uploadedImage = this.getDataURI(files)
    },
    setImage(image) {
      image.value = this.uploadedImage
      this.viewValue()
    }
  },
}
</script>

//preview.vue
<template>
  <div>
    <div style="width:1360px;height:250px;padding:50px;border:solid 1px #DDD;background-color:#FFFFFF;overflow:scroll">
      <canvas id="preview" :style="{
          border: 'solid 1px #000',
          'background-color': '#FFFFFF',
        }">
      </canvas>
    </div>
  </div>


</template>


<script>
export default {
  data() {
    return {}
  },
  props: ['tmp_template'],
  mounted() {
    this.ctx = this.$el.firstChild.firstElementChild.getContext('2d')
    this.drawCreative()
  },
  methods: {
//Canvas生成
    drawCreative() {
      this.ctx.canvas.width = this.tmp_template.width
      this.ctx.canvas.height = this.tmp_template.height
      this.ctx.beginPath()
      this.ctx.clearRect(0, 0, this.tmp_template.width, this.tmp_template.height)
      this.tmp_template.layers.forEach(layer => {
        this.ctx.strokeStyle = this.setTypeColor(layer.type)
        if(layer.type === 'text' && layer.value) {
          this.ctx.fillText(layer.value, layer.x_position, layer.y_position - -10)
        }
        else if(layer.type === 'image' && layer.value)
        {
　　　　　　//画像表示処理
          let image1 = new Image()
          let reader = new FileReader()
          image1.src = layer.value.name
         reader.onload = (e) => {
           this.ctx.drawImage(image1, 0, 0)
         };
          reader.readAsDataURL(layer.value);
        }
        this.ctx.strokeRect(layer.x_position, layer.y_position, layer.width, layer.height)
      })
      this.ctx.fill()
    },
  },
}
</script>

Answer 1

File オブジェクトをそのまま <img> の src 属性に入れても画像は表示されません。
File オブジェクトを元に DataURI を生成し、それを src 属性に入れる必要があります。

function getDataURI(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

    async onFileChange(file) {
      const elFile = this.$refs.file
      const files = elFile[0].files[0]
      this.uploadedImage = await getDataURI(files)
    },

追記

1. v-for の内側で ref を使うとややこしいことになるので、単純に event.target を参照したほうが良いです。

2. uploadedImage はレイヤーと同じ数だけ保存しないと、反映した途端に全レイヤー同じ画像になります。

下記のサンプルコードでは配列の添字を使っているため、レイヤー配列が並び替わったり、間にレイヤーが追加されたりすると uploadedImages とレイヤーの対応付けが崩れますが、レイヤーごとにユニークIDを割り振っている場合は、uploadedImagesを配列ではなくオブジェクトに変更し、IDで対応付けする形にすることで対応付けが崩れなくなります。

1. getDataURI は非同期関数なので、 async/await を使わないと、 uploadedImage に文字列ではなく Promise インスタンスが代入されてしまいます。

それと今回の getDataURI のように使い回しの効く関数はなるべく別ファイルに分離したほうが良いです。

以上３点をふまえると下記のような感じでしょうか。

// utils/getDataURI
export function getDataURI(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

//image.vue
<template>
  <div>
    <div v-for="(image, index) in layer">
      <img v-show="index in uploadedImages && uploadedImages[index]" :src="uploadedImages[index]" />
      <input type="file" @change="event => onFileChange(event, index)" />
      <el-button @click="setImage(index)">反映</el-button>
    </div>
  </div>
</template>

<script>
import { getDataURI } from '@/utils/getDataURI'

export default {
  props: ['tmp_template'],
  data() {
    return {
      uploadedImages: []
    }
  },
  computed: {
    layer() {
      return this.tmp_template.layers.filter(function(layer) {
        if (layer.type === 'image') {
          return layer
        }
      })
    },
  },
  methods: {
    viewValue() {
      //previe.vueの関数
      this.$emit('viewValue')
    },
    async onFileChange(event, index) {
      const { files } = event.target
      const file = files.item(0)
      if (file) {
        this.uploadedImages[index] = await getDataURI(file)
      }
    },
    setImage(index) {
      this.layer[index].value = this.uploadedImages[index]
      this.viewValue()
    }
  },
}
</script>

// preview.vue の一部
        else if(layer.type === 'image' && layer.value)
        {
　　　　　　//画像表示処理
          let image1 = new Image()
          image1.src = layer.value
          // もしかしたら 画像の load イベント待たないと drawImage 失敗するかも？要検証
          this.ctx.drawImage(image1, 0, 0)
        }

Comments

[tokuwgawa]

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
こちらのエラーが出るようになり、表示まではまだ行ってません。
コード追記しましたのでお手隙の際にご覧いただけると幸いです。

[tokuwgawa]

無事表示ができました！ありがとうございます！
しかし反映ボタン２度押ししないとCanvas描画されないのはやはりonloadを設定していないからでしょうか？

[yhg]

image1.addEventListener('load', () => this.ctx.drawImage(image1, 0, 0), false)
に挿し替えてみてください。それでもダメなら別の箇所の問題ですね。

[tokuwgawa]

load処理でうまく行ってなかったので、これでうまくいきました！