forked from WebKit/WebKit-http
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make createImageBitmap() take EXIF orientation into account correctly
https://bugs.webkit.org/show_bug.cgi?id=231063 <rdar://problem/83753956> Reviewed by Myles Maxfield and Said Abou-Hallawa. LayoutTests/imported/w3c: * web-platform-tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation-expected.txt: Added. * web-platform-tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html: Added. * web-platform-tests/html/canvas/element/manual/imagebitmap/resources/squares.jpg: Added. Source/WebCore: Test: imported/w3c/web-platform-tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html This makes us treat {imageOrientation:"none"} as meaning "apply EXIF orientation without any additional transformation", and {imageOrientation:"flipY"} as meaning "apply EXIF orientation and then apply an additional vertical flip". This behavior matches Firefox; whatwg/html#7210 is open on clarifying this behavior in the HTML spec. * html/ImageBitmap.cpp: (WebCore::ImageBitmap::createPromise): (WebCore::ImageBitmap::createFromBuffer): (WebCore::imageOrientationForOrientation): Deleted. * html/ImageBitmapOptions.h: (WebCore::ImageBitmapOptions::resolvedImageOrientation const): * html/ImageBitmapOptions.idl: * platform/graphics/ImageOrientation.h: (WebCore::ImageOrientation::withFlippedY const): git-svn-id: http://svn.webkit.org/repository/webkit/trunk@284436 268f45cc-cd09-0410-ab3c-d52691b4dbfc
- Loading branch information
heycam@apple.com
committed
Oct 19, 2021
1 parent
bad7d8c
commit 0eeae73
Showing
9 changed files
with
218 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
...ts/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
|
|
||
| PASS createImageBitmap with EXIF rotation, imageOrientation none, and no cropping | ||
| PASS createImageBitmap with EXIF rotation, imageOrientation flipY, and no cropping | ||
| PASS createImageBitmap with EXIF rotation, imageOrientation none, and cropping | ||
| PASS createImageBitmap with EXIF rotation, imageOrientation flipY, and cropping | ||
|
|
121 changes: 121 additions & 0 deletions
121
...form-tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <!DOCTYPE html> | ||
| <title>Test that createImageBitmap honors EXIF orientation</title> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <style>canvas { outline: 1px solid black; margin-right: 1em; }</style> | ||
| <body> | ||
| <script> | ||
| function loadImage(src) { | ||
| return new Promise(function(resolve) { | ||
| const image = new Image(); | ||
| image.addEventListener("load", () => resolve(image), { once: true }); | ||
| image.src = src; | ||
| }); | ||
| } | ||
|
|
||
| function checkColors(ctx, w, h, expectedColors) { | ||
| let data = ctx.getImageData(0, 0, w, h).data; | ||
| for (let [row, col, r, g, b, a] of expectedColors) { | ||
| let x = col * 80 + 40; | ||
| let y = row * 80 + 40; | ||
| let i = (x + y * w) * 4; | ||
|
|
||
| let expected = [r, g, b, a]; | ||
| let actual = [data[i], data[i + 1], data[i + 2], data[i + 3]]; | ||
|
|
||
| assert_array_approx_equals(actual, expected, 1, `Pixel value at (${x},${y}) ${expected} =~ ${actual}.`); | ||
| } | ||
| } | ||
|
|
||
| async_test(function(t) { | ||
| const canvas = document.createElement("canvas"); | ||
| canvas.width = 320; | ||
| canvas.height = 160; | ||
| document.body.append(canvas); | ||
|
|
||
| const ctx = canvas.getContext("2d"); | ||
| loadImage("resources/squares.jpg") | ||
| .then((image) => createImageBitmap(image)) | ||
| .then(t.step_func_done(function(imageBitmap) { | ||
| ctx.drawImage(imageBitmap, 0, 0); | ||
| checkColors(ctx, canvas.width, canvas.height, [ | ||
| // row, col, r, g, b, a | ||
| [0, 0, 255, 0, 0, 255], | ||
| [0, 1, 0, 255, 0, 255], | ||
| [0, 2, 0, 0, 255, 255], | ||
| [0, 3, 0, 0, 0, 255], | ||
| [1, 0, 255, 128, 128, 255], | ||
| [1, 1, 128, 255, 128, 255], | ||
| [1, 2, 128, 128, 255, 255], | ||
| [1, 3, 128, 128, 128, 255], | ||
| ]); | ||
| })); | ||
| }, "createImageBitmap with EXIF rotation, imageOrientation none, and no cropping"); | ||
|
|
||
| async_test(function(t) { | ||
| const canvas = document.createElement("canvas"); | ||
| canvas.width = 320; | ||
| canvas.height = 160; | ||
| document.body.append(canvas); | ||
|
|
||
| const ctx = canvas.getContext("2d"); | ||
| loadImage("resources/squares.jpg") | ||
| .then((image) => createImageBitmap(image, { imageOrientation: "flipY" })) | ||
| .then(t.step_func_done(function(imageBitmap) { | ||
| ctx.drawImage(imageBitmap, 0, 0); | ||
| checkColors(ctx, canvas.width, canvas.height, [ | ||
| // row, col, r, g, b, a | ||
| [0, 0, 255, 128, 128, 255], | ||
| [0, 1, 128, 255, 128, 255], | ||
| [0, 2, 128, 128, 255, 255], | ||
| [0, 3, 128, 128, 128, 255], | ||
| [1, 0, 255, 0, 0, 255], | ||
| [1, 1, 0, 255, 0, 255], | ||
| [1, 2, 0, 0, 255, 255], | ||
| [1, 3, 0, 0, 0, 255], | ||
| ]); | ||
| })); | ||
| }, "createImageBitmap with EXIF rotation, imageOrientation flipY, and no cropping"); | ||
|
|
||
| async_test(function(t) { | ||
| const canvas = document.createElement("canvas"); | ||
| canvas.width = 160; | ||
| canvas.height = 160; | ||
| document.body.append(canvas); | ||
|
|
||
| const ctx = canvas.getContext("2d"); | ||
| loadImage("resources/squares.jpg") | ||
| .then(image => createImageBitmap(image, 80, 0, 160, 160)) | ||
| .then(t.step_func_done(function(imageBitmap) { | ||
| ctx.drawImage(imageBitmap, 0, 0); | ||
| checkColors(ctx, canvas.width, canvas.height, [ | ||
| // row, col, r, g, b, a | ||
| [0, 0, 0, 255, 0, 255], | ||
| [0, 1, 0, 0, 255, 255], | ||
| [1, 0, 128, 255, 128, 255], | ||
| [1, 1, 128, 128, 255, 255], | ||
| ]); | ||
| })); | ||
| }, "createImageBitmap with EXIF rotation, imageOrientation none, and cropping"); | ||
|
|
||
| async_test(function(t) { | ||
| const canvas = document.createElement("canvas"); | ||
| canvas.width = 160; | ||
| canvas.height = 160; | ||
| document.body.append(canvas); | ||
|
|
||
| const ctx = canvas.getContext("2d"); | ||
| loadImage("resources/squares.jpg") | ||
| .then(image => createImageBitmap(image, 80, 0, 160, 160, { imageOrientation: "flipY" })) | ||
| .then(t.step_func_done(function(imageBitmap) { | ||
| ctx.drawImage(imageBitmap, 0, 0); | ||
| checkColors(ctx, canvas.width, canvas.height, [ | ||
| // row, col, r, g, b, a | ||
| [0, 0, 128, 255, 128, 255], | ||
| [0, 1, 128, 128, 255, 255], | ||
| [1, 0, 0, 255, 0, 255], | ||
| [1, 1, 0, 0, 255, 255], | ||
| ]); | ||
| })); | ||
| }, "createImageBitmap with EXIF rotation, imageOrientation flipY, and cropping"); | ||
| </script> |
Binary file added
BIN
+1.2 KB
...web-platform-tests/html/canvas/element/manual/imagebitmap/resources/squares.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters