yahoo! open hackday 2013 - frosted glass effect
TRANSCRIPT
Framework Solutions
CoreGraphics: 1425 msGPUImage: 153 msCoreImage: 138 ms
UIToolbar: N/A (unadjustable)
GPUImage Framework
GPUImagePicture *imagePicture = [[GPUImagePicture alloc] initWithImage:sourceImage];GPUImageFastBlurFilter *gpuBlurFilter = [[GPUImageFastBlurFilter alloc] init];gpuBlurFilter.blurPasses = 4;gpuBlurFilter.blurSize = 2.0f;[imagePicture addTarget:gpuBlurFilter];[gpuBlurFilter prepareForImageCapture];[imagePicture processImage]; UIImage *resultImage = [gpuBlurFilter imageFromCurrentlyProcessedOutput];
CoreImage Framework
CIImage *coreSourceImage = [CIImage imageWithCGImage:sourceImage.CGImage];CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];[blurFilter setValue:coreSourceImage forKey:kCIInputImageKey];[blurFilter setValue:@5.0f forKey:@"inputRadius"];CIImage *resultCoreImage = [blurFilter outputImage]; CGImageRef cgImageRef = [_context createCGImage:resultCoreImage fromRect:coreSourceImage.extent];UIImage *resultImage = [UIImage imageWithCGImage:cgImageRef];CGImageRelease(cgImageRef);
UIToolbarUIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake( 0.0f, 0.0f, 320.0f, 100.0f)];[self.view addSubview:toolbar];
Yahoo! Presentation, Confidential 26
• CSS Filter : Blur• SVG Filter • filter : progid:
DXImageTransform.Microsoft.Blur
Cross Browser
Yahoo! Presentation, Confidential 27
• Canvas getImageData
• Using Javascript to evaluate blur effect
• Set blur image to web and modify position
Type III