Comments (8)
@eamitg as you probably already know, a Gaussian blur filter can be applied along the X-axis, the Y-axis, or both. The most typical use is to apply the filter once for each axis.
The reason we implemented Gaussian blur in card.io was to prevent any credit card details from being captured in the screenshot that iOS automatically takes when an app is sent to the background. We found that applying a Gaussian blur once for each axis left too many details still partially readable. So we next tried applying the Gaussian blur twice for each axis. But this blurred everything so much that the entire screen was a uniform gray.
Our current implementation applies the Gaussian blur filter three times, all of them along the X-axis. This leaves the overall structure of a screen intact -- e.g., it leaves the horizontal lines that separate one table view cell from the next -- but completely blurs all content.
The relevant code is in the file CardIOGPUGaussianBlurFilter.m
:
- (UIImage *)processUIImage:(UIImage *)srcUIImage toSize:(const CGSize)size {
__block UIImage *image1 = nil;
[_gpuRenderer withContextDo:^{
UIImage *image2 = nil;
GLint horizontalPass = [_gpuRenderer uniformIndex:@"horizontalPass"];
glUniform1i(horizontalPass, 1);
image1 = [super processUIImage:srcUIImage toSize:size];
image2 = [super processUIImage:image1 toSize:size];
image1 = [super processUIImage:image2 toSize:size];
}];
return image1;
}
At the bottom you can see the three applications of the filter. The variable horizontalPass
is a flag indicating whether to apply the filter along the X-axis (horizontalPass == 1
) or the Y-axis (horizontalPass == 0
).
So to instead apply the filter once along each axis, you could use code similar to this:
- (UIImage *)gaussianBlurUIImage:(UIImage *)srcUIImage toSize:(const CGSize)size {
__block UIImage *image1 = nil;
[_gpuRenderer withContextDo:^{
UIImage *image2 = nil;
GLint horizontalPass = [_gpuRenderer uniformIndex:@"horizontalPass"];
glUniform1i(horizontalPass, 1);
image1 = [super processUIImage:srcUIImage toSize:size];
glUniform1i(horizontalPass, 0);
image2 = [super processUIImage:image1 toSize:size];
}];
return image2;
}
Does that all make sense?
from card.io-ios-source.
Thanks a lot for your inputs @dgoldman-ebay . It does really make sense. I tried to just see the results of a single horizontal pass blur of the CardIOVideoStream layer. But it black it out completely, should it behave like that? I added these basic changes I ran( the last commit) at https://github.com/eamitg/card.io-iOS-source. I also tried the passes you suggested, but its again going all complete black, am I going wrong somewhere ?
Regards.
from card.io-ios-source.
@eamitg your 1-pass code looks fine.
However, is that the only change you've made? Note that when the camera view is showing and you background the app, we always turn off the camera, resulting in a black screen.
The Gaussian blur code directly affects the manual-entry screen, when backgrounding.
What is your specific goal here?
from card.io-ios-source.
@dgoldman-ebay , you are right that camera session is stopped when pushing the app to background. Hence to avoid stopping of camera session and for my quick illustration purpose I added a simple button "Blur" on the main view which when tapped, creates this blur view using the filter(1 pass) and adds to the view.
Need to actually customize the interface(manual or scan ) such that the live camera preview could be obfuscated (like ios control centre blur) on the back [out of focus] when the manual entry is in focus.
from card.io-ios-source.
Ah, sorry. I see now that you made a number of changes.
I'll take a closer look.
In the meantime, could you explain a bit more? Are you planning on creating your own manual-entry view which will appear in front of the camera view, but will leave some of the camera view still showing?
from card.io-ios-source.
@dgoldman-ebay yes, have created own manual entry view and yes need to show lilke you mentioned
from card.io-ios-source.
@eamitg the problem is that this line is producing a black image to start with:
[self.videoStream.previewLayer renderInContext:UIGraphicsGetCurrentContext()];
I suspect the problem might be related to this aspect of the renderInContext:
method:
The OS X v10.5 implementation of this method does not support the entire Core Animation composition model. QCCompositionLayer, CAOpenGLLayer, and QTMovieLayer layers are not rendered. Additionally, layers that use 3D transforms are not rendered, nor are layers that specify backgroundFilters, filters, compositingFilter, or a mask values. Future versions of OS X may add support for rendering these layers and properties.
(That's for OS X v10.5. But I wonder about iOS.)
So you'll need to find another way to render the camera preview layer into a UIImage
.
from card.io-ios-source.
I see. Well, thank you for your inputs. I'll try take it ahead. Regards.
from card.io-ios-source.
Related Issues (20)
- how can we use cardiodataentryviewcontroller ui in our project,
- Card.IO breaks with OpenCV 3.0 or above
- how to install the credit card scanning function (app) in my iphone
- archive all repositories? HOT 3
- Changing the models HOT 2
- Get high resolution of card image
- Does it scan credit cards only? HOT 3
- Block.h XprType does not refer to a value.
- Stuck at Carthage Update HOT 10
- Cannot use card.io as a pod dependency HOT 1
- Finnish localization is still not working HOT 3
- EXC_BAD_ACCESS upon [CardIOGPURenderer withContextDo:] (glFlush)
- Change Title
- Frame of card scanner
- Support for new Visa quick read format
- when running 'fab build:outdir=~' getting error 'Fatal error: Couldn't find any fabfiles!' HOT 4
- I'd like to replace the card. IO of OpenCV, could you tell me how to operate. How to build your own platform-specific OpenCV static libraries ?
- Card IO Native Ionic Plugin
- Using front camera HOT 1
- card.io-iOS-source unable to run, HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from card.io-ios-source.