【图片裁剪】移动端一些处理措施
来源:互联网 发布:武则天 知乎 编辑:程序博客网 时间:2024/05/23 20:07
推荐
这一篇文章是早年为了解决图片裁剪的探索性文章,现在已经开放出了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/2014All 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 pixelsMaximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)Firefox:Maximum height/width: 32,767 pixelsMaximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)IE:Maximum height/width: 8,192 pixelsMaximum area: N/AIE Mobile:Maximum height/width: 4,096 pixelsMaximum 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的话,处理图片这一块也应该如此,因为内存有限,不可能直接加载大图片进入内存再处理的,况且图片的裁剪就是为了裁出一些合适的尺寸,所以预先压缩也是可以接受的。
- 【图片裁剪】移动端一些处理措施
- 基于vue的移动端图片裁剪压缩处理
- vue移动端图片裁剪上传
- 图片处理之裁剪图片
- 移动端的触摸裁剪图片js插件
- vue移动端裁剪图片结合插件Cropper的使用
- vue移动端裁剪图片结合插件Cropper的使用
- 基于touchJS的移动端图片裁剪上传
- cropper.js 实现裁剪图片并上传(移动端)
- Android图片裁剪----移动、缩放图片进行裁剪
- C#图片压缩裁剪处理
- wordpress 图片裁剪问题处理
- GraphicsMagick 实现图片的裁剪, 旋转, 移动
- iOS 图片处理-图片旋转和裁剪
- 裁剪图片(Java端)
- JAVA 图片处理(缩略、裁剪)
- php+jquery处理图片裁剪的模块
- java图片裁剪处理工具类代码
- 解决MysSql数据库添加数据乱码问题
- Android 图片压缩(建议采用下面的方式而不是compress)
- 使用 WebStorm IDE 调试 Pomelo 应用程序
- 韵与度
- ORACLE日期时间函数大全
- 【图片裁剪】移动端一些处理措施
- activiti数据库表结构剖析
- android代码获取网站图标
- test3.10
- Oracle数据库的分页使用
- 移除父控件的所有子控件
- Java中的StringUtils类
- Spring AOP + AspectJ annotation example
- json格式化工具