読者です 読者をやめる 読者になる 読者になる

やったこと

webサービスを作るときに考えたことを垂れ流します

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のコンソールだとなんもエラー出てなかったから気付かなかった。。