Thursday, September 12, 2013

Access to the camera roll and dealing photo binary data

Best part of Cydgets, you still have to deal with security:)
</sarcasm>

Simple to access your camera roll, just create and input file.

<input type="file" id="files" name="files[]" multiple />
When you click on the input file it will open the camera roll.

Once you are there it is easily uploaded. The only issue is, we don't want to go pick a background every time we unlock our phone. We need to save this to LocalStorage so it can be used again.

Well it's against security. Meaning if you uploaded an image to a website, the actual location of the file is unknown. The browsers actually put a fake url here. Just for security purposes. While on safari I have access to the name, iPhone I do not.

Seems impossible to get. Well here comes the work around.

Since I have the image loaded, I am able to access the binary data of this image. If we create a file reader, and push through readAsDataURL(), then we can get the image 64base code. Which is not a url, it is basically the whole image.

Great thing is I figured out I can use it as a url:)

Simply by 

getitems = "This would be where I return from images the one your clicked"

 $('#wallpaper').css('background-image', 'url(' + getitems + ')');

Now that getitems ends up being over 100,000 character of code. WAY to much for a cookie.

I was able to store to LocalStorage, then render across not only pages, but cydgets as well. 


1 comment:

  1. On IRC, Optimo noted that the photo picker option is iOS 6+ only. I imagine most people making new themes aren't supporting older versions, so that's OK, but could be useful to keep in mind.

    ReplyDelete