-
Notifications
You must be signed in to change notification settings - Fork 837
fix: Use image/jpeg as MIME type for canvas.toBlob #801
Conversation
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 Report
@@ 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
Continue to review full report at Codecov.
|
There was a problem hiding this 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); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for fixing this!
There was a problem hiding this 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!
Retargeted. See microsoft#801. Closes microsoft#801, microsoft#838.
The default MIME type for
canvas.toBlob(..)
isimage/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
), andexiftool
below: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