回答率: 85.48%

質問するログイン新規登録

トップに関する質問 canvasでローカルファイル（画像）を表示したい。

編集履歴

質問編集履歴

1

ehnko

2019/01/18 00:50

投稿

スコア45

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -231,3 +231,247 @@
 [リンク内容](https://codepen.io/anon/pen/REyjVp?editors=1111)
 [リンク内容](http://www.html5.jp/canvas/how6.html)
+# 追記
+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>
+```