Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

imagebitmap: Crop bitmap data with formatting (#37397)

Browse source 
Follow the ImageBitmap specification and make cropping of the bitmap
data to the source rectangle with formatting:
https://html.spec.whatwg.org/multipage/#cropped-to-the-source-rectangle-with-formatting

For now the next functionality not implemented:
- image orientation support (such as EXIF metadata)
- color space conversion (image, blob)

The convertion from ResizeQuality to "image" FilterType:
 - pixelated/low/medium/high -> Nearest/Triangle/CatmullRom/Lanczos3

Other browsers use the following sample filtering:
 - chromium (skia): Nearest/Linear/Linear/CatmullRom
 - firefox (skia): Lanczos3

Testing: Improvements in the following WPT tests
 - html/canvas/element/manual/imagebitmap/*

Fixes (partially): #34112

Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
This commit is contained in:
Andrei Volykhin 2025-06-16 15:09:04 +03:00 • committed by GitHub
parent 0f61361e27
commit bcade589e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 441 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

90
components/script/dom/globalscope.rs
View file

@ -2970,8 +2970,8 @@ impl GlobalScope {
pub(crate) fn create_image_bitmap(
&self,
image: ImageBitmapSource,
_sx: i32,
_sy: i32,
sx: i32,
sy: i32,
sw: Option<i32>,
sh: Option<i32>,
options: &ImageBitmapOptions,
@ -3026,8 +3026,8 @@ impl GlobalScope {
return p;
};
// TODO: Support vector HTMLImageElement.
let Some(img) = img.as_raster_image() else {
// Vector HTMLImageElement are not yet supported.
p.reject_error(Error::InvalidState, can_gc);
return p;
};
@ -3051,7 +3051,18 @@ impl GlobalScope {
IpcSharedMemory::from_bytes(img.first_frame().bytes),
);
let image_bitmap = ImageBitmap::new(self, snapshot, can_gc);
// Step 6.3. Set imageBitmap's bitmap data to a copy of image's media data,
// cropped to the source rectangle with formatting.
let Some(bitmap_data) =
ImageBitmap::crop_and_transform_bitmap_data(snapshot, sx, sy, sw, sh, options)
else {
p.reject_error(Error::InvalidState, can_gc);
return p;
};
let image_bitmap = ImageBitmap::new(self, bitmap_data, can_gc);
// Step 6.4. If image is not origin-clean, then set the origin-clean flag
// of imageBitmap's bitmap to false.
image_bitmap.set_origin_clean(image.same_origin(GlobalScope::entry().origin()));
p.resolve_native(&image_bitmap, can_gc);
@ -3063,6 +3074,8 @@ impl GlobalScope {
return p;
}
// Step 6.1. If image's networkState attribute is NETWORK_EMPTY, then return
// a promise rejected with an "InvalidStateError" DOMException.
if video.is_network_state_empty() {
p.reject_error(Error::InvalidState, can_gc);
return p;
@ -3074,7 +3087,20 @@ impl GlobalScope {
return p;
};
let image_bitmap = ImageBitmap::new(self, snapshot, can_gc);
// Step 6.2. Set imageBitmap's bitmap data to a copy of the frame at the current
// playback position, at the media resource's natural width and natural height
// (i.e., after any aspect-ratio correction has been applied),
// cropped to the source rectangle with formatting.
let Some(bitmap_data) =
ImageBitmap::crop_and_transform_bitmap_data(snapshot, sx, sy, sw, sh, options)
else {
p.reject_error(Error::InvalidState, can_gc);
return p;
};
let image_bitmap = ImageBitmap::new(self, bitmap_data, can_gc);
// Step 6.3. If image is not origin-clean, then set the origin-clean flag
// of imageBitmap's bitmap to false.
image_bitmap.set_origin_clean(video.origin_is_clean());
p.resolve_native(&image_bitmap, can_gc);
@ -3092,7 +3118,18 @@ impl GlobalScope {
return p;
};
let image_bitmap = ImageBitmap::new(self, snapshot, can_gc);
// Step 6.1. Set imageBitmap's bitmap data to a copy of image's bitmap data,
// cropped to the source rectangle with formatting.
let Some(bitmap_data) =
ImageBitmap::crop_and_transform_bitmap_data(snapshot, sx, sy, sw, sh, options)
else {
p.reject_error(Error::InvalidState, can_gc);
return p;
};
let image_bitmap = ImageBitmap::new(self, bitmap_data, can_gc);
// Step 6.2. Set the origin-clean flag of the imageBitmap's bitmap to the same value
// as the origin-clean flag of image's bitmap.
image_bitmap.set_origin_clean(canvas.origin_is_clean());
p.resolve_native(&image_bitmap, can_gc);
@ -3110,7 +3147,18 @@ impl GlobalScope {
return p;
};
let image_bitmap = ImageBitmap::new(self, snapshot, can_gc);
// Step 6.1. Set imageBitmap's bitmap data to a copy of image's bitmap data,
// cropped to the source rectangle with formatting.
let Some(bitmap_data) =
ImageBitmap::crop_and_transform_bitmap_data(snapshot, sx, sy, sw, sh, options)
else {
p.reject_error(Error::InvalidState, can_gc);
return p;
};
let image_bitmap = ImageBitmap::new(self, bitmap_data, can_gc);
// Step 6.2. Set the origin-clean flag of imageBitmap's bitmap to the same value
// as the origin-clean flag of image's bitmap.
image_bitmap.set_origin_clean(bitmap.origin_is_clean());
p.resolve_native(&image_bitmap, can_gc);
@ -3128,7 +3176,18 @@ impl GlobalScope {
return p;
};
let image_bitmap = ImageBitmap::new(self, snapshot, can_gc);
// Step 6.1. Set imageBitmap's bitmap data to a copy of image's bitmap data,
// cropped to the source rectangle with formatting.
let Some(bitmap_data) =
ImageBitmap::crop_and_transform_bitmap_data(snapshot, sx, sy, sw, sh, options)
else {
p.reject_error(Error::InvalidState, can_gc);
return p;
};
let image_bitmap = ImageBitmap::new(self, bitmap_data, can_gc);
// Step 6.2. Set the origin-clean flag of the imageBitmap's bitmap to the same value
// as the origin-clean flag of image's bitmap.
image_bitmap.set_origin_clean(canvas.origin_is_clean());
p.resolve_native(&image_bitmap, can_gc);
@ -3138,7 +3197,9 @@ impl GlobalScope {
p.reject_error(Error::InvalidState, can_gc);
},
ImageBitmapSource::ImageData(ref image_data) => {
// <https://html.spec.whatwg.org/multipage/#the-imagebitmap-interface:imagedata-4>
// Step 6.1. Let buffer be image's data attribute value's [[ViewedArrayBuffer]] internal slot.
// Step 6.2. If IsDetachedBuffer(buffer) is true, then return a promise rejected
// with an "InvalidStateError" DOMException.
if image_data.is_detached() {
p.reject_error(Error::InvalidState, can_gc);
return p;
@ -3155,7 +3216,16 @@ impl GlobalScope {
image_data.to_shared_memory(),
);
let image_bitmap = ImageBitmap::new(self, snapshot, can_gc);
// Step 6.3. Set imageBitmap's bitmap data to image's image data,
// cropped to the source rectangle with formatting.
let Some(bitmap_data) =
ImageBitmap::crop_and_transform_bitmap_data(snapshot, sx, sy, sw, sh, options)
else {
p.reject_error(Error::InvalidState, can_gc);
return p;
};
let image_bitmap = ImageBitmap::new(self, bitmap_data, can_gc);
p.resolve_native(&image_bitmap, can_gc);
},

196
components/script/dom/imagebitmap.rs
View file

@ -8,10 +8,13 @@ use std::collections::HashMap;
use base::id::{ImageBitmapId, ImageBitmapIndex};
use constellation_traits::SerializableImageBitmap;
use dom_struct::dom_struct;
use euclid::default::{Point2D, Rect, Size2D};
use snapshot::Snapshot;
use crate::dom::bindings::cell::DomRefCell;
use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::{
ImageBitmapMethods, ImageBitmapOptions, ImageOrientation, PremultiplyAlpha, ResizeQuality,
};
use crate::dom::bindings::reflector::{Reflector, reflect_dom_object};
use crate::dom::bindings::root::DomRoot;
use crate::dom::bindings::serializable::Serializable;
@ -71,6 +74,197 @@ impl ImageBitmap {
pub(crate) fn is_detached(&self) -> bool {
self.bitmap_data.borrow().is_none()
}
/// <https://html.spec.whatwg.org/multipage/#cropped-to-the-source-rectangle-with-formatting>
pub(crate) fn crop_and_transform_bitmap_data(
input: Snapshot,
mut sx: i32,
mut sy: i32,
sw: Option<i32>,
sh: Option<i32>,
options: &ImageBitmapOptions,
) -> Option<Snapshot> {
let input_size = input.size().to_i32();
// Step 2. If sx, sy, sw and sh are specified, let sourceRectangle be a rectangle whose corners
// are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh). Otherwise,
// let sourceRectangle be a rectangle whose corners are the four points (0, 0), (width of input, 0),
// (width of input, height of input), (0, height of input). If either sw or sh are negative,
// then the top-left corner of this rectangle will be to the left or above the (sx, sy) point.
let sw = sw.map_or(input_size.width, |width| {
if width < 0 {
sx = sx.saturating_add(width);
width.saturating_abs()
} else {
width
}
});
let sh = sh.map_or(input_size.height, |height| {
if height < 0 {
sy = sy.saturating_add(height);
height.saturating_abs()
} else {
height
}
});
let source_rect = Rect::new(Point2D::new(sx, sy), Size2D::new(sw, sh));
// Whether the byte length of the source bitmap exceeds the supported range.
// In the case the source is too large, we should fail, and that is not defined.
// <https://github.com/whatwg/html/issues/3323>
let Some(source_byte_length) = pixels::compute_rgba8_byte_length_if_within_limit(
source_rect.size.width as usize,
source_rect.size.height as usize,
) else {
log::warn!(
"Failed to allocate bitmap of size {:?}, too large",
source_rect.size
);
return None;
};
// Step 3. Let outputWidth be determined as follows:
// Step 4. Let outputHeight be determined as follows:
let output_size = match (options.resizeWidth, options.resizeHeight) {
(Some(width), Some(height)) => Size2D::new(width, height),
(Some(width), None) => {
let height =
source_rect.size.height as f64 * width as f64 / source_rect.size.width as f64;
Size2D::new(width, height.round() as u32)
},
(None, Some(height)) => {
let width =
source_rect.size.width as f64 * height as f64 / source_rect.size.height as f64;
Size2D::new(width.round() as u32, height)
},
(None, None) => source_rect.size.to_u32(),
};
// Whether the byte length of the output bitmap exceeds the supported range.
// In the case the output is too large, we should fail, and that is not defined.
// <https://github.com/whatwg/html/issues/3323>
let Some(output_byte_length) = pixels::compute_rgba8_byte_length_if_within_limit(
output_size.width as usize,
output_size.height as usize,
) else {
log::warn!(
"Failed to allocate bitmap of size {:?}, too large",
output_size
);
return None;
};
// TODO: Take into account the image orientation (such as EXIF metadata).
// Step 5. Place input on an infinite transparent black grid plane, positioned so that
// its top left corner is at the origin of the plane, with the x-coordinate increasing to the right,
// and the y-coordinate increasing down, and with each pixel in the input image data occupying a cell
// on the plane's grid.
let input_rect = Rect::new(Point2D::zero(), input_size);
let input_rect_cropped = source_rect
.intersection(&input_rect)
.unwrap_or(Rect::zero());
// Early out for empty tranformations.
if input_rect_cropped.is_empty() {
return Some(Snapshot::cleared(output_size));
}
// Step 6. Let output be the rectangle on the plane denoted by sourceRectangle.
let mut source: Snapshot = Snapshot::from_vec(
source_rect.size.cast(),
input.format(),
input.alpha_mode(),
vec![0; source_byte_length],
);
let source_rect_cropped = Rect::new(
Point2D::new(
input_rect_cropped.origin.x - source_rect.origin.x,
input_rect_cropped.origin.y - source_rect.origin.y,
),
input_rect_cropped.size,
);
pixels::copy_rgba8_image(
input.size(),
input_rect_cropped.cast(),
input.data(),
source.size(),
source_rect_cropped.cast(),
source.data_mut(),
);
// Step 7. Scale output to the size specified by outputWidth and outputHeight.
let mut output = if source.size() != output_size {
let quality = match options.resizeQuality {
ResizeQuality::Pixelated => pixels::FilterQuality::None,
ResizeQuality::Low => pixels::FilterQuality::Low,
ResizeQuality::Medium => pixels::FilterQuality::Medium,
ResizeQuality::High => pixels::FilterQuality::High,
};
let Some(output_data) =
pixels::scale_rgba8_image(source.size(), source.data(), output_size, quality)
else {
log::warn!(
"Failed to scale the bitmap of size {:?} to required size {:?}",
source.size(),
output_size
);
return None;
};
debug_assert_eq!(output_data.len(), output_byte_length);
Snapshot::from_vec(
output_size,
source.format(),
source.alpha_mode(),
output_data,
)
} else {
source
};
// Step 8. If the value of the imageOrientation member of options is "flipY",
// output must be flipped vertically, disregarding any image orientation metadata
// of the source (such as EXIF metadata), if any.
if options.imageOrientation == ImageOrientation::FlipY {
pixels::flip_y_rgba8_image_inplace(output.size(), output.data_mut());
}
// TODO: Step 9. If image is an img element or a Blob object, let val be the value
// of the colorSpaceConversion member of options, and then run these substeps:
// Step 10. Let val be the value of premultiplyAlpha member of options,
// and then run these substeps:
// TODO: Preserve the original input pixel format and perform conversion on demand.
match options.premultiplyAlpha {
PremultiplyAlpha::Default | PremultiplyAlpha::Premultiply => {
output.transform(
snapshot::AlphaMode::Transparent {
premultiplied: true,
},
snapshot::PixelFormat::BGRA,
);
},
PremultiplyAlpha::None => {
output.transform(
snapshot::AlphaMode::Transparent {
premultiplied: false,
},
snapshot::PixelFormat::BGRA,
);
},
}
// Step 11. Return output.
Some(output)
}
}
impl Serializable for ImageBitmap {