IE上のdrawImageのIndexSizeErrorとエッジ

Question

私は、特定のコードは、Internet Explorerとエッジに失敗しますが、ChromeとFirefoxで完璧に動作するように思われること発見しています：何らかの理由で

var image = document.getElementById("myImage"); 
 
var canvas = document.getElementById("myCanvas"); 
 
var context = canvas.getContext("2d"); 
 
context.drawImage(image, 1, 0, 499, 278, 0, 0, 749, 417);

img { 
 
    width: 300px; 
 
    height: 200px; 
 
}

<img id="myImage" src="https://image.ibb.co/bsANfm/emptyphoto.png" /> 
 

 
<canvas id="myCanvas" width="600" height="400"></canvas>

をIE 11とEdge 40.15063.674.0ではCanvasRenderingContext2D.drawImage（）呼び出しが失敗し、IndexSizeError例外が発生します。 According to MDN、キャンバスまたはソース矩形のサイズが0の場合にのみ、このエラーが発生するはずです。

私がここで何か間違っているのかどうか、誰かに回避策があるのか​​どうか、誰かに光を当てはめることができますか？

Answer 1

私は犯人を見つけました。基本的には、ブラウザにy = 0からy = 278までの画像の部分をペイントするように依頼していましたが、画像は275pxしかありません。 IEとEdgeはこれを気に入らないようで、エラーを投げることに決めました。私は275に上記のスニペットに278を変更した場合、それが動作します：

var image = document.getElementById("myImage"); 
 
var canvas = document.getElementById("myCanvas"); 
 
var context = canvas.getContext("2d"); 
 
context.drawImage(image, 1, 0, 499, 275, 0, 0, 749, 417);

img { 
 
    width: 300px; 
 
    height: 200px; 
 
}

<img id="myImage" src="https://image.ibb.co/bsANfm/emptyphoto.png" /> 
 

 
<canvas id="myCanvas" width="600" height="400"></canvas>