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

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

@@ -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/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

@@ -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/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,
                       },
                     },
                   });