Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions soft-skia-wasm/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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)]
Expand Down Expand Up @@ -385,6 +389,10 @@ impl SoftSkiaWASM {
image,
width,
height,
blur,
grayscale,
brighten,
invert,
}) => self.0.set_shape_to_child(
id,
Shapes::I(Image {
Expand All @@ -393,6 +401,10 @@ impl SoftSkiaWASM {
y,
width,
height,
blur,
grayscale,
brighten,
invert,
}),
),
WASMShapesAttr::T(WASMTextAttr {
Expand Down
1 change: 1 addition & 0 deletions soft-skia/Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
31 changes: 30 additions & 1 deletion soft-skia/src/shape.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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)]
Expand Down Expand Up @@ -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(
Expand Down
11 changes: 11 additions & 0 deletions vue-playground/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
11 changes: 11 additions & 0 deletions vue-playground/src/code.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
16 changes: 16 additions & 0 deletions vue-skia-framework/components/VImage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
4 changes: 4 additions & 0 deletions vue-skia-framework/plugin/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
});
Expand Down
Loading