Support Network Image (#13)

Author: meloalright

vue-playground/src/App.vue

@@ -28,6 +28,7 @@
             VRoundRect,
             VLine,
             VPoints,
+            VImage,
           }"
           @error="(e: any) => void 0"
           @input="input"
@@ -74,9 +75,9 @@
         <v-image
           :x="0"
           :y="0"
-          :image="logo"
-          :width="100"
-          :height="100"
+          :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
+          :width="70"
+          :height="70"
         ></v-image>
       </v-surface>
     </template>
@@ -105,7 +106,6 @@ import code from "./code";
 import LoadingCode from "./loading-code";
 import "vue-live/style.css";
 import "prism-themes/themes/prism-night-owl.css";
-import logo from "./assets/raster.png";
 export default defineComponent({
   name: "App",
   components: {
@@ -132,11 +132,11 @@ export default defineComponent({
       VRoundRect,
       VLine,
       VPoints,
+      VImage,
       code,
       LoadingCode,
       debug: false,
       error: undefined,
-      logo,
     };
   },
   mounted() {

vue-playground/src/assets/raster.png

@@ -15,6 +15,13 @@ export default `<v-surface :width="360" :height="360">
     [98, 90],
     [138, 10],
   ]" :style="'fill'" :strokeWidth="1" :color="'rgba(200, 255, 0, 0.7)'" />
+  <v-image
+    :x="0"
+    :y="0"
+    :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
+    :width="70"
+    :height="70"
+  ></v-image>
   <v-group :x="200" :y="160" color="violet" :style="'stroke'" :invertClip="true">
     <template #clip>
       <v-circle :cx="8" :cy="68" :r="40" />

vue-playground/src/code.ts

@@ -1,12 +1,19 @@
-<template>
-  <v-sk-image :image="base64String" :x="x" :y="y" :width="width" :height="height" />
+<template >
+  <v-sk-image v-if="loaded" :image="base64String" :x="x" :y="y" :width="width" :height="height" />
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, getCurrentInstance, PropType } from "vue";
+import { ComponentInternalInstanceWithSoftSkiaWASM } from "../type";
 
 export default defineComponent({
   name: "VImage",
+  data() {
+    return {
+      loaded: false,
+      base64String: ""
+    }
+  },
   props: {
     image: {
       type: String as PropType<string>,
@@ -29,10 +36,36 @@ export default defineComponent({
       required: true,
     }
   },
-  setup(props){
-    const base64String = props.image.replace("data:image/png;base64,", "")
-    return {
-      base64String
+  methods: {
+    reUpdateRoot(vm: ComponentInternalInstanceWithSoftSkiaWASM) {
+      const instance = vm;
+      var parent = instance.parent as ComponentInternalInstanceWithSoftSkiaWASM;
+      while (!("_ssw_id" in parent)) {
+        parent = (parent as ComponentInternalInstanceWithSoftSkiaWASM).parent as ComponentInternalInstanceWithSoftSkiaWASM;
+      }
+      parent.update()
+    }
+  },
+  mounted() {
+    const vm = getCurrentInstance() as ComponentInternalInstanceWithSoftSkiaWASM;
+    if (this.image?.startsWith("data:image/png;base64")) {
+      const base64String = this.image.replace("data:image/png;base64,", "")
+      this.base64String = base64String;
+      this.loaded = true;
+      this.reUpdateRoot(vm);
+    } else {
+      fetch(this.image)
+        .then((res) => res.blob())
+        .then((blob) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64String = (reader.result as string).replace("data:image/png;base64,", "");
+            this.base64String = base64String;
+            this.loaded = true;
+            this.reUpdateRoot(vm);
+          };
+          reader.readAsDataURL(blob);
+        });
     }
   }
 });