canvas: Unify retrieving image data from the HTMLImageElement (#37809)

Currently, HTMLImageElement uses as an image source
(ImageBitmapSource, CanvasImageSource, TexImageSource)
in various canvas2D/WebGL operations, and there is a small
inconsistency in how we get the image data of the 'img' element:
usability checking and retrieving the image data from the image cache.

To simplify and avoid state inconsistency between the window's image
cache and the 'img' element, let's retrieve the image data (as a raster)
from the HTMLImageElement itself.

Testing: No expected changes in testing results, except the
'drawimage_svg_image_with_foreign_object_does_not_taint.html'
which is 'false' passed because drawing of the non supported vector
image
is silently skip instead of throwing the 'InvalidState' exception
anymore.

Signed-off-by: Andrei Volykhin <andrei.volykhin@gmail.com>
This commit is contained in:
Andrei Volykhin 2025-07-02 11:13:30 +03:00 committed by GitHub
parent d5b6160119
commit d0579256bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 118 additions and 140 deletions

View file

@ -749,29 +749,3 @@ impl Convert<GLContextAttributes> for WebGLContextAttributes {
}
}
}
pub(crate) mod utils {
use net_traits::image_cache::ImageResponse;
use net_traits::request::CorsSettings;
use servo_url::ServoUrl;
use crate::dom::window::Window;
pub(crate) fn request_image_from_cache(
window: &Window,
url: ServoUrl,
cors_setting: Option<CorsSettings>,
) -> ImageResponse {
let image_cache = window.image_cache();
let result = image_cache.get_image(
url.clone(),
window.origin().immutable().clone(),
cors_setting,
);
match result {
Some(image) => ImageResponse::Loaded(image, url),
None => ImageResponse::None,
}
}
}

View file

@ -12,7 +12,7 @@ use std::{char, mem};
use app_units::{AU_PER_PX, Au};
use cssparser::{Parser, ParserInput};
use dom_struct::dom_struct;
use euclid::Point2D;
use euclid::default::{Point2D, Size2D};
use html5ever::{LocalName, Prefix, QualName, local_name, ns};
use js::jsapi::JSAutoRealm;
use js::rust::HandleObject;
@ -28,7 +28,9 @@ use net_traits::{
ResourceFetchTiming, ResourceTimingType,
};
use num_traits::ToPrimitive;
use pixels::{CorsStatus, ImageMetadata};
use pixels::{
CorsStatus, ImageMetadata, PixelFormat, Snapshot, SnapshotAlphaMode, SnapshotPixelFormat,
};
use servo_url::ServoUrl;
use servo_url::origin::MutableOrigin;
use style::attr::{AttrValue, LengthOrPercentageOrAuto, parse_integer, parse_length};
@ -168,9 +170,6 @@ pub(crate) struct HTMLImageElement {
}
impl HTMLImageElement {
pub(crate) fn get_url(&self) -> Option<ServoUrl> {
self.current_request.borrow().parsed_url.clone()
}
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
pub(crate) fn is_usable(&self) -> Fallible<bool> {
// If image has an intrinsic width or intrinsic height (or both) equal to zero, then return bad.
@ -193,6 +192,36 @@ impl HTMLImageElement {
pub(crate) fn image_data(&self) -> Option<Image> {
self.current_request.borrow().image.clone()
}
/// Gets the copy of the raster image data.
pub(crate) fn get_raster_image_data(&self) -> Option<Snapshot> {
let Some(img) = self.image_data()?.as_raster_image() else {
warn!("Vector image is not supported as raster image source");
return None;
};
let size = Size2D::new(img.metadata.width, img.metadata.height);
let format = match img.format {
PixelFormat::BGRA8 => SnapshotPixelFormat::BGRA,
PixelFormat::RGBA8 => SnapshotPixelFormat::RGBA,
pixel_format => {
unimplemented!("unsupported pixel format ({:?})", pixel_format)
},
};
let alpha_mode = SnapshotAlphaMode::Transparent {
premultiplied: false,
};
let snapshot = Snapshot::from_vec(
size.cast(),
format,
alpha_mode,
img.first_frame().bytes.to_vec(),
);
Some(snapshot)
}
}
/// The context required for asynchronously loading an external image.

View file

@ -19,7 +19,7 @@ use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::{
ImageBitmapMethods, ImageBitmapOptions, ImageBitmapSource, ImageOrientation, PremultiplyAlpha,
ResizeQuality,
};
use crate::dom::bindings::refcounted::Trusted;
use crate::dom::bindings::refcounted::{Trusted, TrustedPromise};
use crate::dom::bindings::reflector::{Reflector, reflect_dom_object};
use crate::dom::bindings::root::DomRoot;
use crate::dom::bindings::serializable::Serializable;
@ -28,7 +28,6 @@ use crate::dom::bindings::transferable::Transferable;
use crate::dom::globalscope::GlobalScope;
use crate::dom::types::Promise;
use crate::script_runtime::CanGc;
use crate::test::TrustedPromise;
#[dom_struct]
pub(crate) struct ImageBitmap {
@ -359,37 +358,13 @@ impl ImageBitmap {
return p;
}
// If no ImageBitmap object can be constructed, then the promise is rejected instead.
let Some(img) = image.image_data() else {
// If no ImageBitmap object can be constructed, then the promise
// is rejected instead.
let Some(snapshot) = image.get_raster_image_data() else {
p.reject_error(Error::InvalidState, can_gc);
return p;
};
// TODO: Support vector HTMLImageElement.
let Some(img) = img.as_raster_image() else {
p.reject_error(Error::InvalidState, can_gc);
return p;
};
let size = Size2D::new(img.metadata.width, img.metadata.height);
let format = match img.format {
PixelFormat::BGRA8 => SnapshotPixelFormat::BGRA,
PixelFormat::RGBA8 => SnapshotPixelFormat::RGBA,
pixel_format => {
unimplemented!("unsupported pixel format ({:?})", pixel_format)
},
};
let alpha_mode = SnapshotAlphaMode::Transparent {
premultiplied: false,
};
let snapshot = Snapshot::from_vec(
size.cast(),
format,
alpha_mode,
img.first_frame().bytes.to_vec(),
);
// 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) =

View file

@ -29,7 +29,6 @@ use js::typedarray::{
ArrayBufferView, CreateWith, Float32, Float32Array, Int32, Int32Array, TypedArray,
TypedArrayElementCreator, Uint32Array,
};
use net_traits::image_cache::ImageResponse;
use pixels::{self, PixelFormat, Snapshot, SnapshotPixelFormat};
use serde::{Deserialize, Serialize};
use servo_config::pref;
@ -55,9 +54,8 @@ use crate::dom::bindings::inheritance::Castable;
use crate::dom::bindings::reflector::{DomGlobal, DomObject, Reflector, reflect_dom_object};
use crate::dom::bindings::root::{DomOnceCell, DomRoot, LayoutDom, MutNullableDom};
use crate::dom::bindings::str::DOMString;
use crate::dom::element::cors_setting_for_element;
use crate::dom::event::{Event, EventBubbles, EventCancelable};
use crate::dom::htmlcanvaselement::{LayoutCanvasRenderingContextHelpers, utils as canvas_utils};
use crate::dom::htmlcanvaselement::LayoutCanvasRenderingContextHelpers;
use crate::dom::node::{Node, NodeDamage, NodeTraits};
#[cfg(feature = "webxr")]
use crate::dom::promise::Promise;
@ -652,50 +650,30 @@ impl WebGLRenderingContext {
return Err(Error::Security);
}
let img_url = match image.get_url() {
Some(url) => url,
None => return Ok(None),
// Vector images are not currently supported here and there are
// some open questions in the specification about how to handle them:
// See https://github.com/KhronosGroup/WebGL/issues/1503
let Some(snapshot) = image.get_raster_image_data() else {
return Ok(None);
};
let window = match self.canvas {
HTMLCanvasElementOrOffscreenCanvas::HTMLCanvasElement(ref canvas) => {
canvas.owner_window()
},
// This is marked as unreachable as we should have returned already
HTMLCanvasElementOrOffscreenCanvas::OffscreenCanvas(_) => unreachable!(),
};
let cors_setting = cors_setting_for_element(image.upcast());
let img = match canvas_utils::request_image_from_cache(
&window,
img_url,
cors_setting,
) {
ImageResponse::Loaded(image, _) => {
match image.as_raster_image() {
Some(image) => image,
None => {
// Vector images are not currently supported here and there are some open questions
// in the specification about how to handle them:
// See https://github.com/KhronosGroup/WebGL/issues/1503.
warn!(
"Vector images as are not yet supported as WebGL texture source"
);
return Ok(None);
},
}
},
ImageResponse::PlaceholderLoaded(_, _) |
ImageResponse::None |
ImageResponse::MetadataLoaded(_) => return Ok(None),
let snapshot = snapshot.as_ipc();
let size = snapshot.size().cast();
let format: PixelFormat = match snapshot.format() {
SnapshotPixelFormat::RGBA => PixelFormat::RGBA8,
SnapshotPixelFormat::BGRA => PixelFormat::BGRA8,
};
let size = Size2D::new(img.metadata.width, img.metadata.height);
let data = IpcSharedMemory::from_bytes(img.first_frame().bytes);
let (alpha_treatment, y_axis_treatment) =
self.get_current_unpack_state(snapshot.alpha_mode().is_premultiplied());
let (alpha_treatment, y_axis_treatment) = self.get_current_unpack_state(false);
TexPixels::new(data, size, img.format, alpha_treatment, y_axis_treatment)
TexPixels::new(
snapshot.to_ipc_shared_memory(),
size,
format,
alpha_treatment,
y_axis_treatment,
)
},
// TODO(emilio): Getting canvas data is implemented in CanvasRenderingContext2D,
// but we need to refactor it moving it to `HTMLCanvasElement` and support