Mobail Safariのcanvas drawImageは元サイズより大きなパラメータ入れてはいけないみたい
canvas要素で画像を表示させようとしたら、PCブラウザでは表示できるのに、Mobail Safariでは表示できないケースがあって手こずった。
以下のようにコードを書くと、Mobail Safariだと画像描画できなくて真っ白になってしまう。
var canvas = document.createElement("canvas"); canvas.width = 500; canvas.height = 500; var context = canvas.getContext("2d"); //元img(100*100)より大きなサイズを指定 context.drawImage(img, 0, 0, 101, 101, 0, 0, 500, 500); document.body.appendChild(canvas);
どこが悪いのかというと、drawImageのサイズ「101」の部分だった。
Mobail Safariでは、元画像より大きなサイズを指定すると、drawImageできない様子(元のimageのサイズは100*100)。
ちゃんと元サイズ以下の値を指定してあげると、drawImageが成功した。
ちょっとしたことだけど、原因特定するのに微妙に時間食ってしまった。。
※補足
canvasのdrawImageの仕様を読んでたら、本件っぽいのが書いてあった。
↓
http://www.html5.jp/canvas/ref/method/drawImage.html
「描画元の矩形がソースのイメージの中に完全に収まらない、または、sw または sh 引数のいずれかが 0 なら、INDEX_SIZE_ERR 例外を発生させなければいけません。」
drawImageで指定する領域は元画像からはみ出しちゃいけないのね。。
Mobail Safariはこの「INDEX_SIZE_ERR」で描画失敗してたっぽい。Chromeのコンソールだとなんもエラー出てなかったから気付かなかった。。