浏览器画图到 canvas 得到空图的问题

我的图片拼接工具如果在 iOS 设备上使用，选择两张由 iPhone 12 Pro 拍摄的照片进行拼接，会拼接失败，拼接结果会显示为空白。

之所以这样，是因为 iOS 设备的浏览器所支持的 canvas 最大范围是 4096 x 4096 共 16,777,216 个像素，两张由 iPhone 12 Pro 拍摄的照片总像素大于这个值，所以无法拼接。

iOS 浏览器对 canvas 除了有像素值的限制，还有宽度或高度的限制，即使总像素值小于 16,777,216，宽度也不能超过 4,194,303，高度则不能超过 8,388,607。

我的图片拼接工具在电脑 edge 浏览器上使用，如果拼接后的图片宽度或高度太大，也会出现拼接为空的问题。这是因为电脑 edge 浏览器对总像素、宽度、高度也有限制，其中像素值限制远远大于 iOS 浏览器，但宽度和高度限制则远远小于 iOS 浏览器。。

不幸的是，浏览器虽然为 canvas 设置了限制，但超限了不会通知你，也不会报错，加之不同的浏览器、不同的设备、不同的浏览器版本对 canvas 的限制可能都不一样，所以空白 canvas 很容易让人产生困惑。

幸运的是，canvas-size 这个开源项目可以用来判断 canvas 大小是否超限。