关于移动端图片处理技巧

最近做移动端的项目,需要做一些CSS动画,免不了用到一些PNG透明的图片作为元素,

一开始用的PNG8的,显示效果不理想,杂边很突出的,图片大小20多K,

后面使用PNG24,效果好了,但图片太大了134K,最后又回到PNG8,发现导出的时候,添加杂边到背景色,再结合背景图,效果很不错.

不过需要注意的是,添加杂边到前景色,用在背景颜色不固定的效果会很差(比如按钮,图标之类的),本来灰色的杂边会变成你添加的颜色

关于移动端图片处理技巧

时间: 2024-10-10 22:30:24

关于移动端图片处理技巧的相关文章

移动端图片优化技巧 canvas代替image

通常来讲,移动端展示一张图片是用浏览器来渲染的,如果图片过大,手机性能不太好的情况下,手机会显示比较卡. 原因是没有处罚设备本身的GPU来渲染,可以使用canvas触发GPU来渲染图片. 使用 drawImage()方法 如: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img= new Image();img.src = url;img.onload = fu

从源代码分析Android-Universal-Image-Loader图片下载技巧

在手机上尤其需要考虑网络对图片下载的影响,常见的情况是在2G网络.在3G网络需要不同的下载策略,也就是说在慢速网络与快速网络中下载需要考虑不同的策略.一种常见的策略就是Android客户端和服务端相配合的方式,针对慢速网络对图片进行优化(让图片的质量低一点,保证能下载),但是这种情况不在本文讨论的范围中.在本文中主要讨论针对不能改变的服务器图片质量(图片的大小 xx KB),Android-Universal-Image-Loader所采取的下载策略. 需要具体考虑网络情况有:快速.慢速.无网络

移动端web开发技巧(转)

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,

IOS图片拉伸技巧

IOS 图片拉伸技巧 对于有些图标等按钮 在美工设计的按钮下可以通过拉伸效果处理所需效果,最熟悉的莫过于微信聊天的 椭圆背景,也是通过这个这个原理进行背景图片.  如对该图片拉伸,如何操作? 首先找到要拉伸的部分,很明显 两侧椭圆是不变 要拉伸的是中间部分,如何指定中间部位,先看下图 指定这4个宽度后 会形成黑色模块 直白点就是 这块内容就是拉伸后中间那块不断填充的部分 具体代码: 1 UIImage* img=[UIImage imageNamed:@"2.png"];//原图2 U

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM

移动端图片压缩上传解决方案

最近做移动端图片上传,发现图片尤其是iPhone拍照的图片都有2M左右,但是实际上项目中用不到这么大,于是想到要用js在前台进行压缩. 解决方案如下: [一]获取图片数据 先是获取图片数据,也就是监听input file的change事件,然后获取到上传的文件对象files,将类数组的files转成数组,然后进行forEach遍历. 接着判断文件类型,如果不是图片则不作处理.如果是图片就实例化一个filereader,以base64格式读取上传的文件数据,判断数据长度,如果大于200KB的图片就

Cognos报表展示图片小技巧

场景:在销售行业,比如手机,服装行业,如果仅仅的显示数字.文字那就显得不是很生动了,例如可以显示一下图片,那种样子的产品受大家喜欢. 样例1:在报表头都喜欢加上一些公司的logo,让报表看上去专业点. 这样就可以选中区域,添加背景图像,指定url 为图像添加URL路径(../samples/images/) 样例2:根据图像显示销售数据,如图 表设计如下: 需要设置的:选中图像,URL来源来自数据项 Cognos报表展示图片小技巧,布布扣,bubuko.com

CKEditor 自定义按钮插入服务端图片

CKEditor 富文本编辑器很好用,功能很强大,在加上支持服务端图片上传的CKFinder更是方便, 最近在使用CKFinder的时候发现存在很多问题,比如上传图片的时候,图片不能按时间降序排列,另外CKFinder是也是收费的,所以自己想实现一个简单的类似CKFinder的功能, 本节只讲在CKEditor实现服务器图片的插入插件实现方法. CKEditor版本是 ## CKEditor 4.4.4 第一.定义插件 1.在ckeditor\plugins文件夹下,新建serverimg文件夹

Android图片压缩技巧

请尊重他人的劳动成果,转载请注明出处:Android图片压缩技巧 http://blog.csdn.net/fengyuzhengfan/article/details/41759835 当需要将Android客户端的图片上传到服务器时,往往需要将图片进行压缩,关于图片的压缩方法,小编分享几种常用的方式: 第一种方式:裁切以达到压缩的目的 我曾在<Android开发之裁剪照片>一文中详细介绍过如何裁切照片,感兴趣的朋友可以去看一下. 第二种方式:将图片进行降质处理(即降低图片的质量)以达到压缩