Steps to reproduce
1.Create a.html with an img id=srcimg.
2.Write JS code in a.html to open b.html using windows.open.
3.Create b.html with a canvas id=cv.
4.Write JS in b.html. get srcimg object from a.html using var img=window.opener.document.getElementById(“srcimg”).
5.Write JS immedialtely as this:
var c = document.getElementById(“cv”)
var ctx = c.getContext(“2d”);
- Open Develop windows and you’ll find IE issues TYPE_MISMATCH_ERROR.
- By debugging, you’ll find srcimg is HTMLImageElement but type of object what img got is DispHTMLImg. This is why the error caused. Other brand’s browsers have no such problem.
- The workaround is in my post on Stackoverflow website.
- I am particularly curious why IE’s VM do this wrapping? Is it because of security issue. But I think the drawImage API developer of MS IE team isn’t aware this wrapping behavior.
When I use JS to access my opener’s image object (type is HTMLImageElement), the object type will be wrapped as DispHTMLImg. When we apply it to be first argument in HTML5 Canvas drawImage API, it will cause TYPE_MISMATCH_ERROR. Only IE has this problem. I have to use some workaround to deal with this problem. This bug has caused a lot of pains to tremendous Web developers. Besides fixing this bug in Edge, can MS provide a patch for at least IE 10 or up?
Dev Channel specific:
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Mara P.”
Changed Assigned To to “Christian F.”
Changed Assigned To from “Christian F.” to “Li-Hsin H.”
This problem is happening in the latest Edge, and the workaround doesn’t appear to work any more. Any suggestions?