Skip to content
This repository has been archived by the owner on Dec 7, 2021. It is now read-only.

fix: Use image/jpeg as MIME type for canvas.toBlob #801

Closed
wants to merge 1 commit into from

Conversation

mloenow
Copy link
Contributor

@mloenow mloenow commented May 9, 2019

The default MIME type for canvas.toBlob(..) is image/png[0], however, when exporting video assets (e.g. to the Pascal VOC format), the file extension is .jpg for each frame, resulting in a mismatch between extension and MIME type, which can cause issues in your data pipeline.

Verified with PIL (image = PIL.Image.open(encoded_image_io), image.format), and exiftool below:

$ exiftool /data/Test-PascalVOC-export/JPEGImages/IMG_4926.MOV#t=0.066667.jpg
ExifTool Version Number         : 11.30
File Name                       : IMG_4926.MOV#t=0.066667.jpg
Directory                       : /data/Test-PascalVOC-export/JPEGImages
File Size                       : 2.5 MB
File Modification Date/Time     : 2019:05:03 16:35:29+02:00
File Access Date/Time           : 2019:05:03 18:19:43+02:00
File Inode Change Date/Time     : 2019:05:03 16:35:29+02:00
File Permissions                : rw-r--r--
File Type                       : PNG
File Type Extension             : png
MIME Type                       : image/png
Image Width                     : 1080
Image Height                    : 1440
Bit Depth                       : 8
Color Type                      : RGB with Alpha
Compression                     : Deflate/Inflate
Filter                          : Adaptive
Interlace                       : Noninterlaced
Image Size                      : 1080x1440
Megapixels                      : 1.6

This pull request explicitly sets the MIME type to image/jpeg with full quality (1.0).

[0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Parameters

The default MIME type for `canvas.toBlob(..)` is `image/png`[0], however, when exporting video assets (e.g. to the Pascal VOC format), the file extension is `.jpg` for each frame, resulting in a mismatch between extension and MIME type, which can cause issues in your data pipeline.

Verified with `PIL` (`image = PIL.Image.open(encoded_image_io)`, `image.format`), and `exiftool` below:
```
$ exiftool /data/Test-PascalVOC-export/JPEGImages/IMG_4926.MOV#t=0.066667.jpg
ExifTool Version Number         : 11.30
File Name                       : IMG_4926.MOV#t=0.066667.jpg
Directory                       : /data/Test-PascalVOC-export/JPEGImages
File Size                       : 2.5 MB
File Modification Date/Time     : 2019:05:03 16:35:29+02:00
File Access Date/Time           : 2019:05:03 18:19:43+02:00
File Inode Change Date/Time     : 2019:05:03 16:35:29+02:00
File Permissions                : rw-r--r--
File Type                       : PNG
File Type Extension             : png
MIME Type                       : image/png
Image Width                     : 1080
Image Height                    : 1440
Bit Depth                       : 8
Color Type                      : RGB with Alpha
Compression                     : Deflate/Inflate
Filter                          : Adaptive
Interlace                       : Noninterlaced
Image Size                      : 1080x1440
Megapixels                      : 1.6
```

This pull request explicitly sets the MIME type to `image/jpeg` with full quality (1.0).

[0] https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Parameters
@codecov
Copy link

codecov bot commented May 9, 2019

Codecov Report

Merging #801 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@          Coverage Diff           @@
##           master    #801   +/-   ##
======================================
  Coverage    87.9%   87.9%           
======================================
  Files         129     129           
  Lines        4845    4845           
  Branches      922     922           
======================================
  Hits         4259    4259           
  Misses        584     584           
  Partials        2       2
Impacted Files Coverage Δ
src/common/htmlFileReader.ts 89.53% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 745e854...c87be36. Read the comment docs.

@mloenow mloenow mentioned this pull request Jul 29, 2019
Copy link
Contributor

@wbreza wbreza left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks!

@@ -136,7 +136,7 @@ export default class HtmlFileReader {
canvas.width = video.videoWidth;
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob(resolve);
canvas.toBlob(resolve, "image/jpeg", 1.0);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing this!

Copy link
Contributor

@wbreza wbreza left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please re-target to the develop branch. Thanks!

mloenow added a commit to mloenow/VoTT that referenced this pull request Aug 6, 2019
@mloenow
Copy link
Contributor Author

mloenow commented Aug 6, 2019

@wbreza retargeted in #844. Thanks!

@mloenow mloenow closed this Aug 6, 2019
@mloenow mloenow deleted the patch-2 branch August 6, 2019 08:23
tbarlow12 pushed a commit that referenced this pull request Aug 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants