Facebook Twitter Gplus LinkedIn RSS
Home » Blog » Image Caching Issues with ImageFilter

Image Caching Issues with ImageFilter

Published on April 7th, 2012

One of the main reasons I started this blog is because as a developer, when I defeat a bug, no one really cares. At best, perhaps an end-user cares, but your friends and family do not, even if they may listen patiently. After a few hours of fighting an issue with image caching, I have to share this small triumph with my two subscribers.

I recently released Demotivate HD, which is the pay-for version of Demotivate that costs 99 cents. In the next release, I wanted to incorporate this ImageFilter PhoneGap (Cordova) plugin that I found on another developer’s blog site. Basically this allows you to run your image through a few filters to give it the “Instagram” effect.

The plugin hasn’t been updated in a few months, so the first thing I had to do was convert the code from PhoneGap to Cordova. This was relatively easy as I had done it with a few other plugins in the past, which you can download in the download section of this site. Everything worked great except for one small problem, after you run a few images through the filter, sometimes and old image would reappear. My research suggested that the developer had similar issues, as he created a function called “clean” to physically delete the file from the iPhone’s Document folder. Unfortunately, I confirmed checking for the file manually that while his script deletes the file, something is still cached when the code passes the URL back to the JavaScript portion of the code.

After walking the code (I learned a lot about Objective-C though, so it was worth it), I came to the conclusion that the developer did everything correctly. Furthermore, using the built in save function, I could see that the correct image was being passed around and returned properly. Still… something was cached because when I run the program, sometimes (and not always) and old image would return.

How to fix this?

As it turns out, the fix was pretty easy. I generated a random number to tack onto the filename, thus changing the file location each time, eliminating any caching issue. Here’s the code in Objective-C:

int r = arc4random() % 5000;
NSString *random = [NSString stringWithFormat:@"%d", r];
NSString *tPathA = [documentsPath stringByAppendingPathComponent:@"worn"];
NSString *tPathB = [tPathA stringByAppendingString:random];
NSString *filePathB = [tPathB stringByAppendingString:@".jpg"];

Once you setup the new filename, write it as normal.

[imageData writeToFile:filePathB atomically:NO];

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.


5 Responses

  1. You should do a pull request on the project in Git and put in your code 🙂 I did run into this problem and solved it in a similar way but did it in the js by just adding random numbers to the end of the jpg

    nice solution 🙂

  2. I took your code and added it to the project on Git. I also combined the Android and iOS versions into one project.


  3. interactive

    I am trying to use the image filter plugin in my app but it’s not working properly and the link given is being deleted recently i think..

    https://github.com/DrewDahlman/ImageFilter (not available when i clicked)

    could you pls share your image filter plugin code for the cordova.

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2012 zSprawl's zApps

Fork me on GitHub