1use std::fs;
2use std::path::PathBuf;
3use std::sync::Arc;
4
5use crate::{
6 point, px, size, AbsoluteLength, Asset, Bounds, DefiniteLength, DevicePixels, Element,
7 ElementContext, Hitbox, ImageData, InteractiveElement, Interactivity, IntoElement, LayoutId,
8 Length, Pixels, SharedUri, Size, StyleRefinement, Styled, SvgSize, UriOrPath, WindowContext,
9};
10use futures::{AsyncReadExt, Future};
11use image::{ImageBuffer, ImageError};
12#[cfg(target_os = "macos")]
13use media::core_video::CVImageBuffer;
14
15use thiserror::Error;
16use util::{http, ResultExt};
17
18/// A source of image content.
19#[derive(Clone, Debug)]
20pub enum ImageSource {
21 /// Image content will be loaded from provided URI at render time.
22 Uri(SharedUri),
23 /// Image content will be loaded from the provided file at render time.
24 File(Arc<PathBuf>),
25 /// Cached image data
26 Data(Arc<ImageData>),
27 // TODO: move surface definitions into mac platform module
28 /// A CoreVideo image buffer
29 #[cfg(target_os = "macos")]
30 Surface(CVImageBuffer),
31}
32
33impl From<SharedUri> for ImageSource {
34 fn from(value: SharedUri) -> Self {
35 Self::Uri(value)
36 }
37}
38
39impl From<&'static str> for ImageSource {
40 fn from(uri: &'static str) -> Self {
41 Self::Uri(uri.into())
42 }
43}
44
45impl From<String> for ImageSource {
46 fn from(uri: String) -> Self {
47 Self::Uri(uri.into())
48 }
49}
50
51impl From<Arc<PathBuf>> for ImageSource {
52 fn from(value: Arc<PathBuf>) -> Self {
53 Self::File(value)
54 }
55}
56
57impl From<PathBuf> for ImageSource {
58 fn from(value: PathBuf) -> Self {
59 Self::File(value.into())
60 }
61}
62
63impl From<Arc<ImageData>> for ImageSource {
64 fn from(value: Arc<ImageData>) -> Self {
65 Self::Data(value)
66 }
67}
68
69#[cfg(target_os = "macos")]
70impl From<CVImageBuffer> for ImageSource {
71 fn from(value: CVImageBuffer) -> Self {
72 Self::Surface(value)
73 }
74}
75
76/// An image element.
77pub struct Img {
78 interactivity: Interactivity,
79 source: ImageSource,
80 grayscale: bool,
81 object_fit: ObjectFit,
82}
83
84/// Create a new image element.
85pub fn img(source: impl Into<ImageSource>) -> Img {
86 Img {
87 interactivity: Interactivity::default(),
88 source: source.into(),
89 grayscale: false,
90 object_fit: ObjectFit::Contain,
91 }
92}
93
94/// How to fit the image into the bounds of the element.
95pub enum ObjectFit {
96 /// The image will be stretched to fill the bounds of the element.
97 Fill,
98 /// The image will be scaled to fit within the bounds of the element.
99 Contain,
100 /// The image will be scaled to cover the bounds of the element.
101 Cover,
102 /// The image will be scaled down to fit within the bounds of the element.
103 ScaleDown,
104 /// The image will maintain its original size.
105 None,
106}
107
108impl ObjectFit {
109 /// Get the bounds of the image within the given bounds.
110 pub fn get_bounds(
111 &self,
112 bounds: Bounds<Pixels>,
113 image_size: Size<DevicePixels>,
114 ) -> Bounds<Pixels> {
115 let image_size = image_size.map(|dimension| Pixels::from(u32::from(dimension)));
116 let image_ratio = image_size.width / image_size.height;
117 let bounds_ratio = bounds.size.width / bounds.size.height;
118
119 let result_bounds = match self {
120 ObjectFit::Fill => bounds,
121 ObjectFit::Contain => {
122 let new_size = if bounds_ratio > image_ratio {
123 size(
124 image_size.width * (bounds.size.height / image_size.height),
125 bounds.size.height,
126 )
127 } else {
128 size(
129 bounds.size.width,
130 image_size.height * (bounds.size.width / image_size.width),
131 )
132 };
133
134 Bounds {
135 origin: point(
136 bounds.origin.x + (bounds.size.width - new_size.width) / 2.0,
137 bounds.origin.y + (bounds.size.height - new_size.height) / 2.0,
138 ),
139 size: new_size,
140 }
141 }
142 ObjectFit::ScaleDown => {
143 // Check if the image is larger than the bounds in either dimension.
144 if image_size.width > bounds.size.width || image_size.height > bounds.size.height {
145 // If the image is larger, use the same logic as Contain to scale it down.
146 let new_size = if bounds_ratio > image_ratio {
147 size(
148 image_size.width * (bounds.size.height / image_size.height),
149 bounds.size.height,
150 )
151 } else {
152 size(
153 bounds.size.width,
154 image_size.height * (bounds.size.width / image_size.width),
155 )
156 };
157
158 Bounds {
159 origin: point(
160 bounds.origin.x + (bounds.size.width - new_size.width) / 2.0,
161 bounds.origin.y + (bounds.size.height - new_size.height) / 2.0,
162 ),
163 size: new_size,
164 }
165 } else {
166 // If the image is smaller than or equal to the container, display it at its original size,
167 // centered within the container.
168 let original_size = size(image_size.width, image_size.height);
169 Bounds {
170 origin: point(
171 bounds.origin.x + (bounds.size.width - original_size.width) / 2.0,
172 bounds.origin.y + (bounds.size.height - original_size.height) / 2.0,
173 ),
174 size: original_size,
175 }
176 }
177 }
178 ObjectFit::Cover => {
179 let new_size = if bounds_ratio > image_ratio {
180 size(
181 bounds.size.width,
182 image_size.height * (bounds.size.width / image_size.width),
183 )
184 } else {
185 size(
186 image_size.width * (bounds.size.height / image_size.height),
187 bounds.size.height,
188 )
189 };
190
191 Bounds {
192 origin: point(
193 bounds.origin.x + (bounds.size.width - new_size.width) / 2.0,
194 bounds.origin.y + (bounds.size.height - new_size.height) / 2.0,
195 ),
196 size: new_size,
197 }
198 }
199 ObjectFit::None => Bounds {
200 origin: bounds.origin,
201 size: image_size,
202 },
203 };
204
205 result_bounds
206 }
207}
208
209impl Img {
210 /// A list of all format extensions currently supported by this img element
211 pub fn extensions() -> &'static [&'static str] {
212 // This is the list in [image::ImageFormat::from_extension] + `svg`
213 &[
214 "avif", "jpg", "jpeg", "png", "gif", "webp", "tif", "tiff", "tga", "dds", "bmp", "ico",
215 "hdr", "exr", "pbm", "pam", "ppm", "pgm", "ff", "farbfeld", "qoi", "svg",
216 ]
217 }
218
219 /// Set the image to be displayed in grayscale.
220 pub fn grayscale(mut self, grayscale: bool) -> Self {
221 self.grayscale = grayscale;
222 self
223 }
224 /// Set the object fit for the image.
225 pub fn object_fit(mut self, object_fit: ObjectFit) -> Self {
226 self.object_fit = object_fit;
227 self
228 }
229}
230
231impl Element for Img {
232 type RequestLayoutState = ();
233 type PrepaintState = Option<Hitbox>;
234
235 fn request_layout(&mut self, cx: &mut ElementContext) -> (LayoutId, Self::RequestLayoutState) {
236 let layout_id = self.interactivity.request_layout(cx, |mut style, cx| {
237 if let Some(data) = self.source.data(cx) {
238 let image_size = data.size();
239 match (style.size.width, style.size.height) {
240 (Length::Auto, Length::Auto) => {
241 style.size = Size {
242 width: Length::Definite(DefiniteLength::Absolute(
243 AbsoluteLength::Pixels(px(image_size.width.0 as f32)),
244 )),
245 height: Length::Definite(DefiniteLength::Absolute(
246 AbsoluteLength::Pixels(px(image_size.height.0 as f32)),
247 )),
248 }
249 }
250 _ => {}
251 }
252 }
253
254 cx.request_layout(&style, [])
255 });
256 (layout_id, ())
257 }
258
259 fn prepaint(
260 &mut self,
261 bounds: Bounds<Pixels>,
262 _request_layout: &mut Self::RequestLayoutState,
263 cx: &mut ElementContext,
264 ) -> Option<Hitbox> {
265 self.interactivity
266 .prepaint(bounds, bounds.size, cx, |_, _, hitbox, _| hitbox)
267 }
268
269 fn paint(
270 &mut self,
271 bounds: Bounds<Pixels>,
272 _: &mut Self::RequestLayoutState,
273 hitbox: &mut Self::PrepaintState,
274 cx: &mut ElementContext,
275 ) {
276 let source = self.source.clone();
277 self.interactivity
278 .paint(bounds, hitbox.as_ref(), cx, |style, cx| {
279 let corner_radii = style.corner_radii.to_pixels(bounds.size, cx.rem_size());
280
281 if let Some(data) = source.data(cx) {
282 let new_bounds = self.object_fit.get_bounds(bounds, data.size());
283 cx.paint_image(new_bounds, corner_radii, data.clone(), self.grayscale)
284 .log_err();
285 }
286
287 match source {
288 #[cfg(target_os = "macos")]
289 ImageSource::Surface(surface) => {
290 let size = size(surface.width().into(), surface.height().into());
291 let new_bounds = self.object_fit.get_bounds(bounds, size);
292 // TODO: Add support for corner_radii and grayscale.
293 cx.paint_surface(new_bounds, surface);
294 }
295 _ => {}
296 }
297 })
298 }
299}
300
301impl IntoElement for Img {
302 type Element = Self;
303
304 fn into_element(self) -> Self::Element {
305 self
306 }
307}
308
309impl Styled for Img {
310 fn style(&mut self) -> &mut StyleRefinement {
311 &mut self.interactivity.base_style
312 }
313}
314
315impl InteractiveElement for Img {
316 fn interactivity(&mut self) -> &mut Interactivity {
317 &mut self.interactivity
318 }
319}
320
321impl ImageSource {
322 fn data(&self, cx: &mut ElementContext) -> Option<Arc<ImageData>> {
323 match self {
324 ImageSource::Uri(_) | ImageSource::File(_) => {
325 let uri_or_path: UriOrPath = match self {
326 ImageSource::Uri(uri) => uri.clone().into(),
327 ImageSource::File(path) => path.clone().into(),
328 _ => unreachable!(),
329 };
330
331 cx.use_cached_asset::<Image>(&uri_or_path)?.log_err()
332 }
333
334 ImageSource::Data(data) => Some(data.to_owned()),
335 #[cfg(target_os = "macos")]
336 ImageSource::Surface(_) => None,
337 }
338 }
339}
340
341#[derive(Clone)]
342enum Image {}
343
344impl Asset for Image {
345 type Source = UriOrPath;
346 type Output = Result<Arc<ImageData>, ImageCacheError>;
347
348 fn load(
349 source: Self::Source,
350 cx: &mut WindowContext,
351 ) -> impl Future<Output = Self::Output> + Send + 'static {
352 let client = cx.http_client();
353 let scale_factor = cx.scale_factor();
354 let svg_renderer = cx.svg_renderer();
355 async move {
356 let bytes = match source.clone() {
357 UriOrPath::Path(uri) => fs::read(uri.as_ref())?,
358 UriOrPath::Uri(uri) => {
359 let mut response = client.get(uri.as_ref(), ().into(), true).await?;
360 let mut body = Vec::new();
361 response.body_mut().read_to_end(&mut body).await?;
362 if !response.status().is_success() {
363 return Err(ImageCacheError::BadStatus {
364 status: response.status(),
365 body: String::from_utf8_lossy(&body).into_owned(),
366 });
367 }
368 body
369 }
370 };
371
372 let data = if let Ok(format) = image::guess_format(&bytes) {
373 let data = image::load_from_memory_with_format(&bytes, format)?.into_bgra8();
374 ImageData::new(data)
375 } else {
376 let pixmap =
377 svg_renderer.render_pixmap(&bytes, SvgSize::ScaleFactor(scale_factor))?;
378
379 let buffer =
380 ImageBuffer::from_raw(pixmap.width(), pixmap.height(), pixmap.take()).unwrap();
381
382 ImageData::new(buffer)
383 };
384
385 Ok(Arc::new(data))
386 }
387 }
388}
389
390/// An error that can occur when interacting with the image cache.
391#[derive(Debug, Error, Clone)]
392pub enum ImageCacheError {
393 /// An error that occurred while fetching an image from a remote source.
394 #[error("http error: {0}")]
395 Client(#[from] http::Error),
396 /// An error that occurred while reading the image from disk.
397 #[error("IO error: {0}")]
398 Io(Arc<std::io::Error>),
399 /// An error that occurred while processing an image.
400 #[error("unexpected http status: {status}, body: {body}")]
401 BadStatus {
402 /// The HTTP status code.
403 status: http::StatusCode,
404 /// The HTTP response body.
405 body: String,
406 },
407 /// An error that occurred while processing an image.
408 #[error("image error: {0}")]
409 Image(Arc<ImageError>),
410 /// An error that occurred while processing an SVG.
411 #[error("svg error: {0}")]
412 Usvg(Arc<usvg::Error>),
413}
414
415impl From<std::io::Error> for ImageCacheError {
416 fn from(error: std::io::Error) -> Self {
417 Self::Io(Arc::new(error))
418 }
419}
420
421impl From<ImageError> for ImageCacheError {
422 fn from(error: ImageError) -> Self {
423 Self::Image(Arc::new(error))
424 }
425}
426
427impl From<usvg::Error> for ImageCacheError {
428 fn from(error: usvg::Error) -> Self {
429 Self::Usvg(Arc::new(error))
430 }
431}