test load picture on canvas

src/components/Menu2dCA.vue

@@ -15,14 +15,14 @@
     </div>
     <div class="form-field">
       <label>Start from picture</label><br />
-      <input type="file" @change="previewFile" />
-      <input type="button" value="start" @click="toggleDraw2dLast()" />
+      <input type="file" @change="preparePicture" />
+      <input type="button" value="start" @click="toggle2dDrawFromPicture()" />
     </div>
   </MenuRow>
 </template>
 
 <script>
-  import { mapActions } from "pinia";
+  import { mapActions, mapWritableState } from "pinia";
   import MenuRow from "./MenuRow.vue";
   import { globalStore } from "../stores/index.js";
 
@@ -31,10 +31,38 @@
     components: {
       MenuRow,
     },
+    data() {
+      return {
+        uploadedFile: "",
+      };
+    },
+    computed: {
+      ...mapWritableState(globalStore, ["picture"]),
+    },
     methods: {
-      ...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
-      previewFile(event) {
-        console.log(event.target.files);
+      ...mapActions(globalStore, [
+        "toggleDraw2dLast",
+        "toggleDraw2d",
+        "toggle2dDrawFromPicture",
+      ]),
+      preparePicture(event) {
+        const files = event.target.files;
+        this.picture = new Image();
+        this.picture.width = this.canvasWidth;
+        if (FileReader && files && files.length) {
+          const reader = new FileReader();
+
+          reader.onload = () => {
+            this.picture.src = reader.result;
+            this.toggle2dDrawFromPicture();
+          };
+
+          reader.onerror = () => {
+            console.log(reader.error);
+          };
+
+          reader.readAsDataURL(files[0]);
+        }
       },
     },
   };