【图片裁剪】移动端一些处理措施

推荐

这一篇文章是早年为了解决图片裁剪的探索性文章，现在已经开放出了falsh版及html5版本的图片裁剪插件，各位有时间可以看看：
浮士德html5图片裁剪器2016开源版
浮士德头像裁剪flash版2016福利版
上面两个解决方案已经经过多个项目的成功应用，适用于低级浏览器及现代浏览器，ipad，android，iphone4s，iphone5，iphone5s，iphone6等设备等。

前言

假如各位有做过移动设备，安卓ios上面的图片处理的时候，那么肯定会遇到一些问题，第一，ios上面的图片方向会打横打竖甚至颠倒，请看看exif.js，这个库告诉你图片的一些orientation信息；第二，ios上面大图片加载会出现图片没办法绘制到canvas或者变形的bug，请看看megapix-image.js这个库，它会告诉你如何处理这个问题；第三，大图片加载到canvas，假如你要做一些图片不停移动的操作【换而言之，就是不停重新绘制图片】，你会发现程序会崩溃掉。本文就描述一下第三个问题。

资料参考

在各种设备上面有canvas绘制的合适尺寸，通常图片绘制在这些尺寸上会相对稳定，但是canvas一旦超出这种尺寸就会发生意想不到的结果，譬如，程序崩掉。
下面是各个平台的canvas最大尺寸。

Updated 10/13/2014

All tested browsers have limits to the height/width of canvas elements, but many browsers also limit the total area of the canvas element. The limits are as follows for the browsers I'm able to test:

Chrome:

Maximum height/width: 32,767 pixels
Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)

Firefox:

Maximum height/width: 32,767 pixels
Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)

IE:

Maximum height/width: 8,192 pixels
Maximum area: N/A

IE Mobile:

Maximum height/width: 4,096 pixels
Maximum area: N/A

 iPod Touch 16GB = 1448x1448
 iPad Mini       = 2290x2289
 iPhone 3        = 1448x1448
 iPhone 5        = 2290x2289

Here is the restrictions for the canvas for mobile devices:-

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.

So for example - if you want to support Apple’s older hardware, the size of your canvas cannot exceed 2048×1464.

Hope these resources will help you to pull you out.

结论及处理方式

换而言之，将大图片都绘制到画布里面无论尺寸多大这种方案是不合适的。为了可以兼容尽量多的设备，我们应该：
1、先压缩图片，使其尺寸变小，譬如，1400x1400以内
2、将该图片作为需要处理的图片而非原图片。
这样以后程序的处理就会平稳很多，图片的移动裁剪的速度都会相对流畅。

其他app的话，处理图片这一块也应该如此，因为内存有限，不可能直接加载大图片进入内存再处理的，况且图片的裁剪就是为了裁出一些合适的尺寸，所以预先压缩也是可以接受的。