やったこと

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

スマホのブラウザだとcanvas要素で大きい画像読めないのか

ブラウザ上でcanvas要素を使って画像を加工する処理作ってるんだけど、ときどき画像が読み込めないことがある。

PCのブラウザだとちゃんと読めるのに、スマホのときだけこれが発生する。
調べてみると、どうやらスマホのブラウザにはcanvas要素の制限があるみたい。

↓(iPhone safariのページに書いてあった)
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

Because of the memory available on iOS, there are limits on the number of resources it can process:
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
The height and width of a canvas object is 150 x 300 pixels if not specified


なんか5Mピクセル以上のでかい画像は扱えない様子。iPhone5のカメラは8Mピクセルらしいから、自分で撮った写真が扱えないのか。。

写真をスマホ上で加工できるwebアプリシリーズを作ろうという計画が密かにあったんだけど、こんな仕様だとちょっと厳しいな。。