0.0.9 (#30)

* Support :blur :grayscale :brighten :invert in v-image (#29)

* fix: v-image props into v-sk-image

* chore: optimize doc and ci

* feat: lock ci version of vue skia

.github/workflows/ci.yml

@@ -33,21 +33,20 @@ jobs:
       - name: soft-skia-wasm
         run: |
           cargo install wasm-pack
-          pnpm run build:wasm
+          cd soft-skia-wasm
+          wasm-pack build --release --target web
 
       - name: vue-skia-framework
         run: |
           cd vue-skia-framework
           pnpm i
-          cd ..
-          pnpm run build:vue
+          pnpm run build
 
       - name: vue-playground
         run: |
           cd vue-playground
           pnpm i
-          cd ..
-          pnpm --filter vue-playground build
+          pnpm run build
 
       - name: Archive vue-skia-framework artifacts
         uses: actions/upload-artifact@v3

README.md

@@ -105,8 +105,16 @@ $ wasm-pack build --release --target web
 
 ```shell
 $ cd vue-skia-framework
-$ npm i
-$ npm run build
+$ pnpm i
+$ pnpm run build
+```
+
+#### Vue Playground Development
+
+```shell
+$ cd vue-playground
+$ pnpm i
+$ pnpm run serve
 ```
 
 ## License

package.json

@@ -2,11 +2,6 @@
   "name": "monorepo",
   "version": "0.1.0",
   "private": "true",
-  "scripts": {
-    "serve": "pnpm --filter vue-playground serve",
-    "build": "pnpm build:wasm && pnpm build:vue",
-    "build:vue": "pnpm --filter vue-skia build",
-    "build:wasm": "cd soft-skia-wasm && wasm-pack build"
-  },
+  "scripts": {},
   "packageManager": "[email protected]"
 }

soft-skia-wasm/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "soft-skia-wasm"
-version = "0.8.0"
+version = "0.9.0"
 authors = ["meloalright <[email protected]>"]
 edition = "2018"
 

soft-skia-wasm/src/lib.rs

@@ -92,6 +92,10 @@ pub struct WASMImageAttr {
     y: i32,
     width: u32,
     height: u32,
+    blur: Option<f32>,
+    grayscale: Option<bool>,
+    brighten: Option<i32>,
+    invert: Option<bool>,
 }
 
 #[derive(Serialize, Deserialize, Debug)]
@@ -385,6 +389,10 @@ impl SoftSkiaWASM {
                 image,
                 width,
                 height,
+                blur,
+                grayscale,
+                brighten,
+                invert,
             }) => self.0.set_shape_to_child(
                 id,
                 Shapes::I(Image {
@@ -393,6 +401,10 @@ impl SoftSkiaWASM {
                     y,
                     width,
                     height,
+                    blur,
+                    grayscale,
+                    brighten,
+                    invert,
                 }),
             ),
             WASMShapesAttr::T(WASMTextAttr {

soft-skia/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "soft_skia"
-version = "0.8.0"
+version = "0.9.0"
 edition = "2021"
 description="software rasterization skia binding"
 license = "MIT"
@@ -12,6 +12,7 @@ png = "0.17.5"
 tiny-skia = "0.10.0"
 base64 = "0.21.0"
 fontdue = "0.7.3"
+image = "0.25.1"
 
 [dependencies.web-sys]
 version = "0.3"

soft-skia/src/shape.rs

@@ -7,6 +7,8 @@ use fontdue::{
 use std::iter::zip;
 pub use tiny_skia::{ColorU8, FillRule, Mask, Paint, PathBuilder, Pixmap, Stroke, Transform};
 use tiny_skia::{LineCap, LineJoin, Path, PixmapPaint};
+use image::io::Reader as ImageReader;
+use std::io::Cursor;
 
 #[derive(Debug)]
 pub enum Shapes {
@@ -112,6 +114,10 @@ pub struct Image {
     pub y: i32,
     pub width: u32,
     pub height: u32,
+    pub blur: Option<f32>,
+    pub grayscale: Option<bool>,
+    pub brighten: Option<i32>,
+    pub invert: Option<bool>,
 }
 
 #[derive(Debug)]
@@ -509,7 +515,30 @@ impl Shape for Image {
 
     fn draw(&self, pixmap: &mut Pixmap, context: &DrawContext) -> () {
         let u8_array = base64::decode(&self.image).expect("base64 decode failed");
-        let p = Pixmap::decode_png(&u8_array).expect("decode png failed");
+        let mut bytes: Vec<u8> = Vec::new();
+
+        let mut img = ImageReader::new(Cursor::new(&u8_array as &[u8])).with_guessed_format().unwrap().decode().unwrap();
+
+        if let Some(blur) = self.blur {
+            img = img.blur(blur);
+        }
+        if let Some(grayscale) = self.grayscale {
+            if grayscale {
+                img = img.grayscale();
+            }
+        }
+        if let Some(brighten) = self.brighten {
+            img = img.brighten(brighten);
+        }
+        if let Some(invert) = self.invert {
+            if invert {
+                img.invert();
+            }
+        }
+
+        img.write_to(&mut Cursor::new(&mut bytes), image::ImageFormat::Png).unwrap();
+
+        let p = Pixmap::decode_png(&bytes).expect("decode png failed");
         let scale_x = self.width as f32 / p.width() as f32;
         let scale_y = self.height as f32 / p.height() as f32;
         pixmap.draw_pixmap(

vue-playground/package-ci.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-playground",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -14,7 +14,7 @@
     "prismjs": "^1.29.0",
     "vue": "^3.2.13",
     "vue-live": "^2.5.4",
-    "vue-skia": "latest"
+    "vue-skia": "0.0.9"
   },
   "devDependencies": {
     "@types/node": "^20.5.0",

vue-playground/src/App.vue

@@ -73,6 +73,17 @@
           :style="'fill'"
         >
         </v-rect>
+        <v-image
+          :x="30"
+          :y="40"
+          :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
+          :width="70"
+          :height="70"
+          v-bind:blur="10"
+          :grayscale="false"
+          :brighten="40"
+          :invert="false"
+        ></v-image>
         <v-image
           :x="0"
           :y="0"

vue-playground/src/code.ts

@@ -15,6 +15,17 @@ 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="30"
+    :y="40"
+    :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
+    :width="70"
+    :height="70"
+    v-bind:blur="10"
+    :grayscale="false"
+    :brighten="40"
+    :invert="false"
+  ></v-image>
   <v-image
     :x="0"
     :y="0"

vue-skia-framework/components/VImage.vue

@@ -1,5 +1,5 @@
 <template >
-  <v-sk-image v-if="loaded" :image="base64String" :x="x" :y="y" :width="width" :height="height" />
+  <v-sk-image v-if="loaded" :image="base64String" :x="x" :y="y" :width="width" :height="height" :blur="blur" :grayscale="grayscale" :brighten="brighten" :invert="invert" />
 </template>
 
 <script lang="ts">
@@ -34,6 +34,22 @@ export default defineComponent({
     height: {
       type: Number as PropType<number>,
       required: true,
+    },
+    blur: {
+      type: Number as PropType<number>,
+      required: false,
+    },
+    grayscale: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+    },
+    brighten: {
+      type: Number as PropType<number>,
+      required: false,
+    },
+    invert: {
+      type: Boolean as PropType<boolean>,
+      required: false,
     }
   },
   methods: {

vue-skia-framework/package-publish.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-skia",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "files": [
     "lib",
     "type.d.ts",
@@ -13,6 +13,6 @@
   "main": "./main.js",
   "module": "./main.js",
   "dependencies": {
-    "soft-skia-wasm": "0.8.0"
+    "soft-skia-wasm": "0.9.0"
   }
 }

vue-skia-framework/plugin/index.ts

@@ -170,6 +170,10 @@ const VSKNode = (name: string) => {
                         y: attrs.y,
                         width: attrs.width,
                         height: attrs.height,
+                        blur: attrs.blur,
+                        grayscale: attrs.grayscale,
+                        brighten: attrs.brighten,
+                        invert: attrs.invert,
                       },
                     },
                   });