符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
object c(主要语言) ,,数据库至少一种(mysql),,ps(图形处理)等等,,另外还要做电脑端的后台管理,,jsp或asp或php等等至少一种,,另外最好用框架做,,ssh
创新互联主营翁源网站建设的网络公司,主营网站建设方案,app软件开发,翁源h5小程序设计搭建,翁源网站营销推广欢迎翁源等地区企业咨询
在项目中经常遇到要上传图片,如果直接上传,那么会上传比较大的图片,导致费流量,刷新时加载图片时间过长,手机内存占用率高等问题。
一、先来介绍下概念:
图片的压缩其实是俩概念,
1、是 “压” 文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降,
2、是 “缩” 文件的尺寸变小,也就是像素数减少。长宽尺寸变小,文件体积同样会减小。
二、解决方法(以上传头像为例),先缩再压:
2.1 矫正图片方向(照片是有方向的,避免出现“倒立”的情况)
- (UIImage*)fixOrientation:(UIImage*)aImage {
// No-op if the orientation is already correct
if(aImage.imageOrientation==UIImageOrientationUp)
returnaImage;
// We need to calculate the proper transformation to make the image upright.
// We do it in 2 steps: Rotate if Left/Right/Down, and then flip if Mirrored.
CGAffineTransformtransform =CGAffineTransformIdentity;
switch(aImage.imageOrientation) {
caseUIImageOrientationDown:
caseUIImageOrientationDownMirrored:
transform =CGAffineTransformTranslate(transform, aImage.size.width, aImage.size.height);
transform =CGAffineTransformRotate(transform,M_PI);
break;
caseUIImageOrientationLeft:
caseUIImageOrientationLeftMirrored:
transform =CGAffineTransformTranslate(transform, aImage.size.width,0);
transform =CGAffineTransformRotate(transform,M_PI_2);
break;
caseUIImageOrientationRight:
caseUIImageOrientationRightMirrored:
transform =CGAffineTransformTranslate(transform,0, aImage.size.height);
transform =CGAffineTransformRotate(transform, -M_PI_2);
break;
default:
break;
}
switch(aImage.imageOrientation) {
caseUIImageOrientationUpMirrored:
caseUIImageOrientationDownMirrored:
transform =CGAffineTransformTranslate(transform, aImage.size.width,0);
transform =CGAffineTransformScale(transform, -1,1);
break;
caseUIImageOrientationLeftMirrored:
caseUIImageOrientationRightMirrored:
transform =CGAffineTransformTranslate(transform, aImage.size.height,0);
transform =CGAffineTransformScale(transform, -1,1);
break;
default:
break;
}
// Now we draw the underlying CGImage into a new context, applying the transform
// calculated above.
CGContextRefctx =CGBitmapContextCreate(NULL, aImage.size.width, aImage.size.height,
CGImageGetBitsPerComponent(aImage.CGImage),0,
CGImageGetColorSpace(aImage.CGImage),
CGImageGetBitmapInfo(aImage.CGImage));
CGContextConcatCTM(ctx, transform);
switch(aImage.imageOrientation) {
caseUIImageOrientationLeft:
caseUIImageOrientationLeftMirrored:
caseUIImageOrientationRight:
caseUIImageOrientationRightMirrored:
CGContextDrawImage(ctx,CGRectMake(0,0,aImage.size.height,aImage.size.width), aImage.CGImage);
break;
default:
CGContextDrawImage(ctx,CGRectMake(0,0,aImage.size.width,aImage.size.height), aImage.CGImage);
break;
}
CGImageRef cgimg =CGBitmapContextCreateImage(ctx);
UIImage *img = [UIImageimageWithCGImage:cgimg];
CGContextRelease(ctx);
CGImageRelease(cgimg);
return img;
}
2.2 拿到上面矫正过的图片,缩小图片尺寸,调用下面方法传入newSize,如(200,200):
+ (UIImage*)imageWithImageSimple:(UIImage*)image scaledToSize:(CGSize)newSize
{
UIGraphicsBeginImageContext(newSize);
[imagedrawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage* newImage =UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
2.3 将2.2的图片再压,这个方法可以重复压
//调整大小
NSData *imageData =UIImageJPEGRepresentation(newImage,rate);
NSUIntegersizeOrigin = [image Datalength];//多少KB
NSUIntegersizeOriginKB = sizeOrigin /1024;//多少KB
2.4 上传头像
调用后台接口,把imageData二进制数据上传即可
总结:对图片压缩处理时,在保证图片清晰度变化不大时,减小图片文件大小。方法2.2中的newSize 和 2.3中的rate要以实际效果来设置,我在自己项目中上传的头像最终尺寸是200*200像素,大小为4KB左右。
对于iOS开发者而言,想要打造一款美图App,最佳首选的开源框架莫过于GPUImage。它内嵌了上百种图像滤镜,能够满足市面上的一切美颜开发方案。同时也具备了实时美颜的功能。通过这样强大的开源框架,我们可以在其上层开发属于我们自己的美图应用。SnapseedImitation 是以Snapseed为原型,利用GPUImage框架开发的图像处理软件。
SnapseedImitation
Github地址:
主要依赖GPUImage Github:
1.安装Cocoapods
2.pod 'GPUImage'
3. improt 导入GPUImage.h后编译即可。
通过GPUImagePicture获取待编辑图像,再经过GPUImageFilter渲染后产出一帧frame,经由消息管道通知后,便可在GPUImageView显示编辑后的图片,或者我们可以通过GPUImageFilter直接导出渲染后的UIImage。
GPUImageInputGPUImageFilterGPUImageOutput
以拉升变形滤镜为例:
//@拉升变形镜滤镜
//创造输入源
GPUImagePicture* gpupicture = [[GPUImagePicturealloc]initWithImage:[UIImageimageNamed:@"Duck.jpg"]];
//创建滤镜
PUImageStretchDistortionFilter* stretchDistortionFilter = [GPUImageStretchDistortionFilternew];
//为滤镜赋值
stretchDistortionFilter.center=CGPointMake(0.2,0.2);
//将输入源和滤镜绑定
[gpupicture addTarget:stretchDistortionFilter];
//为原图附上滤镜效果[gpupicture processImage];
//滤镜收到原图产生的一个frame,并将它作为自己的当前图像缓存
[stretchDistortionFilter useNextFrameForImageCapture];
//通过滤镜,获取当前的图像。
UIImage*image = [stretchDistortionFilter imageFromCurrentFramebuffer];
图像拉升变形前后对比 :
开发过程中,必然会有多种滤镜复合的需求,例如一个可以变化亮度、对比度、曝光的图像调节程序。但是依照上一个示例,我们每添加一种滤镜,便会代替之前的滤镜效果。如果每次处理的都是上一次的filter导出的UIImage图片的话,又会导致无法恢复到原图样子,导致失真。(可参考在绘画板中,把图片缩小到最小,再放大,图片变成为了一个像素块。)
这时候,我们需要一个很好用的类:GPUImageFilterPipeline
GPUImageFilterPipeline可以将多个滤镜进行复合,并且在多次处理后,仍然能够恢复成为原图不失真。
仍然以拉升变形和卡通描边效果为例 :
//获取原图
GPUImagePicture* gpupicture = [[GPUImagePicturealloc]initWithImage:[UIImageimageNamed:@"Duck.jpg"]];
//输出图像的
ViewGPUImageView* gpuimageView = [[GPUImageViewalloc]initWithFrame:CGRectMake(0,60,320,320)];[self.viewaddSubview:gpuimageView];
//卡通描边滤镜
GPUImageToonFilter* toonFilter = [GPUImageToonFilternew];toonFilter.threshold=0.1;
//拉升变形滤镜
GPUImageStretchDistortionFilter* stretchDistortionFilter = [GPUImageStretchDistortionFilternew];
stretchDistortionFilter.center=CGPointMake(0.5,0.5);
//将滤镜组成数组
NSArray* filters = @[toonFilter,stretchDistortionFilter];
//通过pipline,将输入源,输出,滤镜,三方绑定
GPUImageFilterPipeline* pipLine = [[GPUImageFilterPipelinealloc]initWithOrderedFilters:filters input:self.gpupictureoutput:self.gpuimageView];
//绘制产出最终带有复合滤镜的图像。
[self.gpupictureprocessImage];
//获取产出的UIImage图像
//此时调用useNextFrameForImageCapture的可以是任一在数组中的Filter。
[stretchDistortionFilter useNextFrameForImageCapture];
UIImage* image = [self.pipLinecurrentFilteredFrame];
基于GPUImage框架,我为其添加了一套了Snapseed的UI,通过手势识别方案对图像滤镜进行调节拖控。
更多内容:
GPUImage 进阶学习,实时视频录制,人脸检测
简单直接有效的方法就是用图像处理软件对它进行处理就好了数码象机拍的照片像素高所以容量就大 对他处理一下就好了 不影响图片的清晰度!ACDSee 就是一个很不错的图片浏览和处理图片的好东西 处理方式非常简单 一个批量处理 4M左右的照片可以处理到400KB-600KB左右当然容量的大小朋友可以自己确定 处理后的图片清晰度不受什么影响
下图为 iOS APP 图形渲染框架, APP 在显示可视化的图形时,使用到了 Core Animation 、 Core Graphics 、 Core Image 等框架,这些框架在渲染图形时,都需要通过 OpenGL ES / Metal 来驱动 GPU 进行渲染与绘制。
UIKit 是 iOS 开发者最常用的框架,里面提供了 UIView 。
UIView 供开发者用来:
Core Animation 源自于 Layer Kit, 是一个复合引擎,主要职责包含渲染( CALayer )、构建和实现动画。 CALayer 是用户所能在屏幕上看到一切的基础。
Core Graphics 是基于Quartz 的高级绘图引擎,主要用于运行时绘制图像。其功能有绘制路径、颜色管理、渐变、阴影、创建图像、图像遮罩、PDF文档创建显示及分析。
Core Image 拥有一系列现成的图像过滤器,可以对已存在的图片进行高效处理。大部分情况下,``Core Image ``` 是在GPU中完成工作,如果GPU忙,会使用CPU进行处理。
Core Animation 、 Core Graphics 、 Core Image 这个三个框架间也存在着依赖关系。
上面提到 CALayer 是用户所能在屏幕上看到一切的基础。所以 Core Graphics 、 Core Image 是需要依赖于 CALayer 来显示界面的。由于 CALayer 又是 Core Animation 框架提供的,所以说 Core Graphics 、 Core Image 是依赖于``Core Animation ```的。
上文还提到每一个 UIView 内部都关联一个 CALayer 图层,即 backing layer ,每一个 CALayer 都包含一个 content 属性指向一块缓存区,即 backing store , 里面存放位图(Bitmap)。 iOS 中将该缓存区保存的图片称为 寄宿图 。
这个寄宿图有两个设置方式:
CALayer 是如何调用 GPU 并显示可视化内容的呢?下面我们就需要介绍一下 Core Animation 流水线的工作原理。
事实上,app 本身并不负责渲染,渲染则是由一个独立的进程负责,即 Render Server 进程。
App 通过 IPC 将渲染任务及相关数据提交给 Render Server 。 Render Server 处理完数据后,再传递至 GPU。最后由 GPU 调用 iOS 的图像设备进行显示。
Core Animation 流水线的详细过程如下:
对上述步骤进行串联,它们执行所消耗的时间远远超过 16.67 ms,因此为了满足对屏幕的 60 FPS 刷新率的支持,需要将这些步骤进行分解,通过流水线的方式进行并行执行,如下图所示。
在 Core Animation 流水线中,app 调用 Render Server 前的最后一步 Commit Transaction 其实可以细分为 4 个步骤:
参考文章: iOS 图像渲染原理
在 iOS 开发过程中,对图片的处理不仅仅局限于显示、渲染样式,还常常遇到对view指定区域截图,以及对图片的压缩、拉伸等操作。下面我们介绍一下类似的操作过程:
注:通过 UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale) 和 drawViewHierarchyInRect 的配合来截取并渲染出来的图片位置和大小,是由前者的size和后者的rect共同决定的。 即,画布相当于父view,其尺寸为size,截图绘制到画布中的位置和尺寸为rect。
想试一试的同学,可以创建一个demo,取不同的size和rect值,来观察画布和截图的位置。也可以试着将画布和截图完全吻合,即将截图完整的渲染出来,这并不难。
裁剪图片就是对当前的图片按照指定的大小范围生成一个新的图片。需要注意的是如果当前显示图片是2倍图或者3倍图,要么可能尺寸不对,要么截出来的图片很模糊,因此,需要在截图前调整rect值。
注:UIImageJPEGRepresentation 两个参数:图片引用 和压缩系数,而 UIImagePNGRepresentation 只需图片引用作为参数。在实际使用过程中,UIImagePNGRepresentation(UIImage* image) 一般要比UIImageJPEGRepresentation(UIImage* image, 1.0) 返回的图片数据量大,在处理图片时,若对图片质量要求不高,则建议使用UIImageJPEGRepresentation,根据自己的实际使用场景设置压缩系数,进一步降低图片数据量大小。
在 = iOS 5.0 时,UIImage的新方法可以处理图片的拉伸问题:
使用过程:
在 = iOS 6.0 时,UIImage的新方法可以处理图片的拉伸问题:
使用过程:
参考文章: