New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 840372 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Oct 11
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Feature

Blocked on:
issue skia:7926
issue 847436
issue 847527

Blocking:
issue 634542
issue 668547



Sign in to add a comment

Implement HTMLCanvasElement::convertToBlob()

Project Member Reported by zakerinasab@chromium.org, May 7 2018

Issue description

Add target color space and pixel format to HTMLCanvasElement.toBlob(). This is part of ongoing efforts to add color management to the canvas (https://github.com/WICG/canvas-color-space/blob/master/CanvasColorSpaceProposal.md), 
 
Currently, the image format and the quality parameter are passed separately (https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element):

USVString toDataURL(optional DOMString type, optional any quality);
void toBlob(BlobCallback _callback, optional DOMString type, optional any quality);

It seems better to consider a dictionary, similar to what has been proposed for OffscreenCanvas.convertToBlob(). We also want to stick to the color space and pixel formats that are supported for canvas itself.

dictionary ImageEncodeOptions {
  DOMString type = "image/png";
  unrestricted double quality = 1.0;
  CanvasColorSpace colorSpace = "srgb";
  CanvasPixelFormat pixelFormat = "8-8-8-8";
};

USVString toDataURL(ImageEncodeOptions options);
Promise<Blob> toBlob(ImageEncodeOptions options);

Questions:
1. Do we need to ship a new version of toDataURL, considering blocking APIs are not favorite any more?

2. WDYT about migrating from callback based toBlob() to promise based?

3. Since the callback is not optional in the current toBlob(), we can make ImageEncodeOptions optional:
Promise<Blob> toBlob(optional ImageEncodeOptions options);
but then the API would not match toDataURL(). WDYT?

Description: Show this description
Blocking: 634542
Description: Show this description
Summary: Support target color space and pixel format in toBlob() (was: Support target color space and pixel format in toBlob/toDataURL)
As discussed with junov@, we don't need to support color management in toDataURL(). Also, the signature of the new convertToBlob() will be as follows:

enum ImagePixelFormat {
  "8-8-8-8", // default
  "uint16",
};

dictionary ImageEncodeOptions {
  DOMString type = "image/png";
  unrestricted double quality = 1.0;
  CanvasColorSpace colorSpace = "srgb";
  ImagePixelFormat pixelFormat = "8-8-8-8";
};

Promise<Blob> convertToBlob(optional ImageEncodeOptions options);

Comment 6 by junov@chromium.org, May 7 2018

yes, convertToBlob() is the future.  The legacy APIs still need to behave correctly on color-managed canvases, but they don't need to provide color management options.
Blockedon: skia:7926
Summary: Implement HTMLCanvasElement::convertToBlob() (was: Support target color space and pixel format in toBlob())
After discussions with junov@, we decided to use a new enum for the image color space instead of the existing canvas color space, mostly since the wide gamut canvas color spaces use linear gamma but for the exported image we like to use the standard gamma transfer function of the used wide gamut color space.
Blocking: 668547
Blockedon: 847527
Blockedon: 847513
Blockedon: 847436
Project Member

Comment 13 by bugdroid1@chromium.org, May 30 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/18c9afdfdca9ba786f0feed6c14074cc468984b9

commit 18c9afdfdca9ba786f0feed6c14074cc468984b9
Author: Reza.Zakerinasab <zakerinasab@chromium.org>
Date: Wed May 30 21:04:11 2018

Implement HTMLCanvaElement::convertToBlob()

HTMLCanvaElement::convertToBlob() is a new promise-based toBlob
API that allows to specify the color space and the pixel format
of the target blob.

Bug:  840372 , 847436 
Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: I77c8b98ada3a5f9fbef38ad1b86d9ef15fdea570
Reviewed-on: https://chromium-review.googlesource.com/1048169
Commit-Queue: Mohammad Reza Zakerinasab <zakerinasab@chromium.org>
Reviewed-by: Justin Novosad <junov@chromium.org>
Reviewed-by: Mohammad Reza Zakerinasab <zakerinasab@chromium.org>
Cr-Commit-Position: refs/heads/master@{#562990}
[add] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/WebKit/LayoutTests/fast/canvas/color-space/canvas-colorManaged-convertToBlob-roundtrip.html
[delete] https://crrev.com/5d3781923cdbfff3a168ab1284888c01923d1543/third_party/WebKit/LayoutTests/platform/win/virtual/color_space/fast/canvas/color-space/toDataURL-color-managed-round-trip-expected.png
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/WebKit/LayoutTests/webexposed/element-instance-property-listing-expected.txt
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/WebKit/LayoutTests/webexposed/global-interface-listing-expected.txt
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/public/platform/web_feature.mojom
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/core_idl_files.gni
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/canvas_async_blob_creator.cc
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/canvas_async_blob_creator.h
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/canvas_async_blob_creator_test.cc
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/canvas_rendering_context_host.cc
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/canvas_rendering_context_host.h
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/html_canvas_element.cc
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/html_canvas_element.h
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/html_canvas_element.idl
[add] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/html/canvas/image_encode_options.idl
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/inspector/inspector_audits_agent.cc
[delete] https://crrev.com/5d3781923cdbfff3a168ab1284888c01923d1543/third_party/blink/renderer/core/offscreencanvas/image_encode_options.idl
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/offscreencanvas/offscreen_canvas.cc
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/core/offscreencanvas/offscreen_canvas.h
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/platform/graphics/canvas_color_params.cc
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/platform/graphics/canvas_color_params.h
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/platform/graphics/color_correction_test_utils.cc
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/platform/graphics/color_correction_test_utils.h
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/platform/graphics/image_data_buffer.cc
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/third_party/blink/renderer/platform/graphics/image_data_buffer.h
[modify] https://crrev.com/18c9afdfdca9ba786f0feed6c14074cc468984b9/tools/metrics/histograms/enums.xml

Update: convertToBlob for 8-8-8-8 pixel format is almost done. Supporting F16 blobs is still blocked on skia:7926.
Cc: -junov@chromium.org
Project Member

Comment 16 by bugdroid1@chromium.org, Oct 9

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/719366e5a414954e932079badb8d61f0135243fc

commit 719366e5a414954e932079badb8d61f0135243fc
Author: Reza.Zakerinasab <zakerinasab@chromium.org>
Date: Tue Oct 09 17:58:25 2018

Support Uint16 blobs in HTMLCanvasElement::convertToBlob()

Bug:  840372 
Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
Change-Id: I4d0b63eee42c8518b9614e65606da38fe6a77237
Reviewed-on: https://chromium-review.googlesource.com/c/1269766
Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Commit-Queue: Mohammad Reza Zakerinasab <zakerinasab@chromium.org>
Cr-Commit-Position: refs/heads/master@{#597986}
[modify] https://crrev.com/719366e5a414954e932079badb8d61f0135243fc/third_party/WebKit/LayoutTests/fast/canvas/color-space/canvas-colorManaged-convertToBlob-roundtrip.html
[modify] https://crrev.com/719366e5a414954e932079badb8d61f0135243fc/third_party/blink/renderer/core/html/canvas/canvas_async_blob_creator.cc
[modify] https://crrev.com/719366e5a414954e932079badb8d61f0135243fc/third_party/blink/renderer/core/html/canvas/canvas_async_blob_creator.h
[modify] https://crrev.com/719366e5a414954e932079badb8d61f0135243fc/third_party/blink/renderer/core/html/canvas/canvas_async_blob_creator_test.cc
[modify] https://crrev.com/719366e5a414954e932079badb8d61f0135243fc/third_party/blink/renderer/platform/graphics/skia/skia_utils.cc
[modify] https://crrev.com/719366e5a414954e932079badb8d61f0135243fc/third_party/blink/renderer/platform/graphics/skia/skia_utils.h

Blockedon: -847513
Status: Fixed (was: Assigned)

Sign in to add a comment