canvas.getContext('2d').drawImage() fails for MJPEG sources

Issue #8907660 • Assigned to Rafael C.


Oskar B.
Sep 14, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

function snapshot (filename) {
const img = document.querySelector(‘img’);
const canvas = document.createElement(‘canvas’);
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext(‘2d’).drawImage(img, 0, 0, width, height);
navigator.msSaveOrOpenBlob(canvas.msToBlob(), filename);

The above code works as intended with the src of the img-tag is a normal jpeg.
When the src is an mjpeg endpoint, a black image is generated. No warnings or errors are seen in the console.

The difference is in the drawImage() call. In Chrome and Firefox the currently displayed MJPEG “frame” is drawn on the cavas. In Edge nothing is drawn on the canvas.


0 attachments

    Comments and activity

    • There is a typo in my example code (width and height are undefined variables)
      but the issue is real. Can’t figure out a way to edit the original example

    • Microsoft Edge Team

      Changed Assigned To to “Venkat K.”

      Changed Assigned To from “Venkat K.” to “Rico M.”

      Changed Assigned To from “Rico M.” to “Rafael C.”

      Changed Status to “Confirmed”

    • I have confirmed that this is still happening. Any word on a fix or workaround?

    • Microsoft Edge Team

      Changed Status from “Confirmed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in