HTMLCanvasElement.cpp 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/Base64.h>
  7. #include <AK/Checked.h>
  8. #include <AK/MemoryStream.h>
  9. #include <LibGfx/Bitmap.h>
  10. #include <LibGfx/ImageFormats/JPEGWriter.h>
  11. #include <LibGfx/ImageFormats/PNGWriter.h>
  12. #include <LibWeb/Bindings/ExceptionOrUtils.h>
  13. #include <LibWeb/Bindings/HTMLCanvasElementPrototype.h>
  14. #include <LibWeb/CSS/StyleComputer.h>
  15. #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
  16. #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
  17. #include <LibWeb/CSS/StyleValues/StyleValueList.h>
  18. #include <LibWeb/DOM/Document.h>
  19. #include <LibWeb/HTML/CanvasRenderingContext2D.h>
  20. #include <LibWeb/HTML/HTMLCanvasElement.h>
  21. #include <LibWeb/HTML/Numbers.h>
  22. #include <LibWeb/HTML/Scripting/ExceptionReporter.h>
  23. #include <LibWeb/Layout/CanvasBox.h>
  24. #include <LibWeb/Platform/EventLoopPlugin.h>
  25. #include <LibWeb/WebIDL/AbstractOperations.h>
  26. namespace Web::HTML {
  27. JS_DEFINE_ALLOCATOR(HTMLCanvasElement);
  28. static constexpr auto max_canvas_area = 16384 * 16384;
  29. HTMLCanvasElement::HTMLCanvasElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  30. : HTMLElement(document, move(qualified_name))
  31. {
  32. }
  33. HTMLCanvasElement::~HTMLCanvasElement() = default;
  34. void HTMLCanvasElement::initialize(JS::Realm& realm)
  35. {
  36. Base::initialize(realm);
  37. WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLCanvasElement);
  38. }
  39. void HTMLCanvasElement::visit_edges(Cell::Visitor& visitor)
  40. {
  41. Base::visit_edges(visitor);
  42. m_context.visit(
  43. [&](JS::NonnullGCPtr<CanvasRenderingContext2D>& context) {
  44. visitor.visit(context);
  45. },
  46. [&](JS::NonnullGCPtr<WebGL::WebGLRenderingContext>& context) {
  47. visitor.visit(context);
  48. },
  49. [](Empty) {
  50. });
  51. }
  52. void HTMLCanvasElement::apply_presentational_hints(CSS::StyleProperties& style) const
  53. {
  54. // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images
  55. // The width and height attributes map to the aspect-ratio property on canvas elements.
  56. // FIXME: Multiple elements have aspect-ratio presentational hints, make this into a helper function
  57. // https://html.spec.whatwg.org/multipage/rendering.html#map-to-the-aspect-ratio-property
  58. // if element has both attributes w and h, and parsing those attributes' values using the rules for parsing non-negative integers doesn't generate an error for either
  59. auto w = parse_non_negative_integer(get_attribute_value(HTML::AttributeNames::width));
  60. auto h = parse_non_negative_integer(get_attribute_value(HTML::AttributeNames::height));
  61. if (w.has_value() && h.has_value())
  62. // then the user agent is expected to use the parsed integers as a presentational hint for the 'aspect-ratio' property of the form auto w / h.
  63. style.set_property(CSS::PropertyID::AspectRatio,
  64. CSS::StyleValueList::create(CSS::StyleValueVector {
  65. CSS::IdentifierStyleValue::create(CSS::ValueID::Auto),
  66. CSS::RatioStyleValue::create(CSS::Ratio { static_cast<double>(w.value()), static_cast<double>(h.value()) }) },
  67. CSS::StyleValueList::Separator::Space));
  68. }
  69. unsigned HTMLCanvasElement::width() const
  70. {
  71. // https://html.spec.whatwg.org/multipage/canvas.html#obtain-numeric-values
  72. // The rules for parsing non-negative integers must be used to obtain their numeric values.
  73. // If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead.
  74. // The width attribute defaults to 300
  75. return parse_non_negative_integer(get_attribute_value(HTML::AttributeNames::width)).value_or(300);
  76. }
  77. unsigned HTMLCanvasElement::height() const
  78. {
  79. // https://html.spec.whatwg.org/multipage/canvas.html#obtain-numeric-values
  80. // The rules for parsing non-negative integers must be used to obtain their numeric values.
  81. // If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead.
  82. // the height attribute defaults to 150
  83. return parse_non_negative_integer(get_attribute_value(HTML::AttributeNames::height)).value_or(150);
  84. }
  85. void HTMLCanvasElement::reset_context_to_default_state()
  86. {
  87. m_context.visit(
  88. [](JS::NonnullGCPtr<CanvasRenderingContext2D>& context) {
  89. context->reset_to_default_state();
  90. },
  91. [](JS::NonnullGCPtr<WebGL::WebGLRenderingContext>&) {
  92. TODO();
  93. },
  94. [](Empty) {
  95. // Do nothing.
  96. });
  97. }
  98. WebIDL::ExceptionOr<void> HTMLCanvasElement::set_width(unsigned value)
  99. {
  100. TRY(set_attribute(HTML::AttributeNames::width, MUST(String::number(value))));
  101. m_bitmap = nullptr;
  102. reset_context_to_default_state();
  103. return {};
  104. }
  105. WebIDL::ExceptionOr<void> HTMLCanvasElement::set_height(unsigned value)
  106. {
  107. TRY(set_attribute(HTML::AttributeNames::height, MUST(String::number(value))));
  108. m_bitmap = nullptr;
  109. reset_context_to_default_state();
  110. return {};
  111. }
  112. JS::GCPtr<Layout::Node> HTMLCanvasElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
  113. {
  114. return heap().allocate_without_realm<Layout::CanvasBox>(document(), *this, move(style));
  115. }
  116. HTMLCanvasElement::HasOrCreatedContext HTMLCanvasElement::create_2d_context()
  117. {
  118. if (!m_context.has<Empty>())
  119. return m_context.has<JS::NonnullGCPtr<CanvasRenderingContext2D>>() ? HasOrCreatedContext::Yes : HasOrCreatedContext::No;
  120. m_context = CanvasRenderingContext2D::create(realm(), *this);
  121. return HasOrCreatedContext::Yes;
  122. }
  123. JS::ThrowCompletionOr<HTMLCanvasElement::HasOrCreatedContext> HTMLCanvasElement::create_webgl_context(JS::Value options)
  124. {
  125. if (!m_context.has<Empty>())
  126. return m_context.has<JS::NonnullGCPtr<WebGL::WebGLRenderingContext>>() ? HasOrCreatedContext::Yes : HasOrCreatedContext::No;
  127. auto maybe_context = TRY(WebGL::WebGLRenderingContext::create(realm(), *this, options));
  128. if (!maybe_context)
  129. return HasOrCreatedContext::No;
  130. m_context = JS::NonnullGCPtr<WebGL::WebGLRenderingContext>(*maybe_context);
  131. return HasOrCreatedContext::Yes;
  132. }
  133. // https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-getcontext
  134. JS::ThrowCompletionOr<HTMLCanvasElement::RenderingContext> HTMLCanvasElement::get_context(String const& type, JS::Value options)
  135. {
  136. // 1. If options is not an object, then set options to null.
  137. if (!options.is_object())
  138. options = JS::js_null();
  139. // 2. Set options to the result of converting options to a JavaScript value.
  140. // NOTE: No-op.
  141. // 3. Run the steps in the cell of the following table whose column header matches this canvas element's canvas context mode and whose row header matches contextId:
  142. // NOTE: See the spec for the full table.
  143. if (type == "2d"sv) {
  144. if (create_2d_context() == HasOrCreatedContext::Yes)
  145. return JS::make_handle(*m_context.get<JS::NonnullGCPtr<HTML::CanvasRenderingContext2D>>());
  146. return Empty {};
  147. }
  148. // NOTE: The WebGL spec says "experimental-webgl" is also acceptable and must be equivalent to "webgl". Other engines accept this, so we do too.
  149. if (type.is_one_of("webgl"sv, "experimental-webgl"sv)) {
  150. if (TRY(create_webgl_context(options)) == HasOrCreatedContext::Yes)
  151. return JS::make_handle(*m_context.get<JS::NonnullGCPtr<WebGL::WebGLRenderingContext>>());
  152. return Empty {};
  153. }
  154. return Empty {};
  155. }
  156. static Gfx::IntSize bitmap_size_for_canvas(HTMLCanvasElement const& canvas, size_t minimum_width, size_t minimum_height)
  157. {
  158. auto width = max(canvas.width(), minimum_width);
  159. auto height = max(canvas.height(), minimum_height);
  160. Checked<size_t> area = width;
  161. area *= height;
  162. if (area.has_overflow()) {
  163. dbgln("Refusing to create {}x{} canvas (overflow)", width, height);
  164. return {};
  165. }
  166. if (area.value() > max_canvas_area) {
  167. dbgln("Refusing to create {}x{} canvas (exceeds maximum size)", width, height);
  168. return {};
  169. }
  170. return Gfx::IntSize(width, height);
  171. }
  172. bool HTMLCanvasElement::create_bitmap(size_t minimum_width, size_t minimum_height)
  173. {
  174. auto size = bitmap_size_for_canvas(*this, minimum_width, minimum_height);
  175. if (size.is_empty()) {
  176. m_bitmap = nullptr;
  177. return false;
  178. }
  179. if (!m_bitmap || m_bitmap->size() != size) {
  180. auto bitmap_or_error = Gfx::Bitmap::create(Gfx::BitmapFormat::BGRA8888, Gfx::AlphaType::Premultiplied, size);
  181. if (bitmap_or_error.is_error())
  182. return false;
  183. m_bitmap = bitmap_or_error.release_value_but_fixme_should_propagate_errors();
  184. }
  185. return m_bitmap;
  186. }
  187. struct SerializeBitmapResult {
  188. ByteBuffer buffer;
  189. StringView mime_type;
  190. };
  191. // https://html.spec.whatwg.org/multipage/canvas.html#a-serialisation-of-the-bitmap-as-a-file
  192. static ErrorOr<SerializeBitmapResult> serialize_bitmap(Gfx::Bitmap const& bitmap, StringView type, Optional<double> quality)
  193. {
  194. // If type is an image format that supports variable quality (such as "image/jpeg"), quality is given, and type is not "image/png", then,
  195. // if Type(quality) is Number, and quality is in the range 0.0 to 1.0 inclusive, the user agent must treat quality as the desired quality level.
  196. // Otherwise, the user agent must use its default quality value, as if the quality argument had not been given.
  197. if (quality.has_value() && !(*quality >= 0.0 && *quality <= 1.0))
  198. quality = OptionalNone {};
  199. if (type.equals_ignoring_ascii_case("image/jpeg"sv)) {
  200. AllocatingMemoryStream file;
  201. Gfx::JPEGWriter::Options jpeg_options;
  202. if (quality.has_value())
  203. jpeg_options.quality = static_cast<int>(quality.value() * 100);
  204. TRY(Gfx::JPEGWriter::encode(file, bitmap, jpeg_options));
  205. return SerializeBitmapResult { TRY(file.read_until_eof()), "image/jpeg"sv };
  206. }
  207. // User agents must support PNG ("image/png"). User agents may support other types.
  208. // If the user agent does not support the requested type, then it must create the file using the PNG format. [PNG]
  209. return SerializeBitmapResult { TRY(Gfx::PNGWriter::encode(bitmap)), "image/png"sv };
  210. }
  211. // https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-todataurl
  212. String HTMLCanvasElement::to_data_url(StringView type, Optional<double> quality)
  213. {
  214. // It is possible the the canvas doesn't have a associated bitmap so create one
  215. if (!bitmap())
  216. create_bitmap();
  217. // FIXME: 1. If this canvas element's bitmap's origin-clean flag is set to false, then throw a "SecurityError" DOMException.
  218. // 2. If this canvas element's bitmap has no pixels (i.e. either its horizontal dimension or its vertical dimension is zero)
  219. // then return the string "data:,". (This is the shortest data: URL; it represents the empty string in a text/plain resource.)
  220. if (!m_bitmap)
  221. return "data:,"_string;
  222. // 3. Let file be a serialization of this canvas element's bitmap as a file, passing type and quality if given.
  223. auto file = serialize_bitmap(*m_bitmap, type, move(quality));
  224. // 4. If file is null then return "data:,".
  225. if (file.is_error()) {
  226. dbgln("HTMLCanvasElement: Failed to encode canvas bitmap to {}: {}", type, file.error());
  227. return "data:,"_string;
  228. }
  229. // 5. Return a data: URL representing file. [RFC2397]
  230. auto base64_encoded_or_error = encode_base64(file.value().buffer);
  231. if (base64_encoded_or_error.is_error()) {
  232. return "data:,"_string;
  233. }
  234. return MUST(URL::create_with_data(file.value().mime_type, base64_encoded_or_error.release_value(), true).to_string());
  235. }
  236. // https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-toblob
  237. WebIDL::ExceptionOr<void> HTMLCanvasElement::to_blob(JS::NonnullGCPtr<WebIDL::CallbackType> callback, StringView type, Optional<double> quality)
  238. {
  239. // It is possible the the canvas doesn't have a associated bitmap so create one
  240. if (!bitmap())
  241. create_bitmap();
  242. // FIXME: 1. If this canvas element's bitmap's origin-clean flag is set to false, then throw a "SecurityError" DOMException.
  243. // 2. Let result be null.
  244. RefPtr<Gfx::Bitmap> bitmap_result;
  245. // 3. If this canvas element's bitmap has pixels (i.e., neither its horizontal dimension nor its vertical dimension is zero),
  246. // then set result to a copy of this canvas element's bitmap.
  247. if (m_bitmap)
  248. bitmap_result = TRY_OR_THROW_OOM(vm(), m_bitmap->clone());
  249. // 4. Run these steps in parallel:
  250. Platform::EventLoopPlugin::the().deferred_invoke([this, callback, bitmap_result, type, quality] {
  251. // 1. If result is non-null, then set result to a serialization of result as a file with type and quality if given.
  252. Optional<SerializeBitmapResult> file_result;
  253. if (bitmap_result) {
  254. if (auto result = serialize_bitmap(*bitmap_result, type, move(quality)); !result.is_error())
  255. file_result = result.release_value();
  256. }
  257. // 2. Queue an element task on the canvas blob serialization task source given the canvas element to run these steps:
  258. queue_an_element_task(Task::Source::CanvasBlobSerializationTask, [this, callback, file_result = move(file_result)] {
  259. auto maybe_error = Bindings::throw_dom_exception_if_needed(vm(), [&]() -> WebIDL::ExceptionOr<void> {
  260. // 1. If result is non-null, then set result to a new Blob object, created in the relevant realm of this canvas element, representing result. [FILEAPI]
  261. JS::GCPtr<FileAPI::Blob> blob_result;
  262. if (file_result.has_value())
  263. blob_result = FileAPI::Blob::create(realm(), file_result->buffer, TRY_OR_THROW_OOM(vm(), String::from_utf8(file_result->mime_type)));
  264. // 2. Invoke callback with « result ».
  265. TRY(WebIDL::invoke_callback(*callback, {}, move(blob_result)));
  266. return {};
  267. });
  268. if (maybe_error.is_throw_completion())
  269. report_exception(maybe_error.throw_completion(), realm());
  270. });
  271. });
  272. return {};
  273. }
  274. void HTMLCanvasElement::present()
  275. {
  276. m_context.visit(
  277. [](JS::NonnullGCPtr<CanvasRenderingContext2D>&) {
  278. // Do nothing, CRC2D writes directly to the canvas bitmap.
  279. },
  280. [](JS::NonnullGCPtr<WebGL::WebGLRenderingContext>& context) {
  281. context->present();
  282. },
  283. [](Empty) {
  284. // Do nothing.
  285. });
  286. }
  287. }