Here's how to get the data from an image.
http://blogs.nitobi.com/jesse/2009/09/24/image-caching-with-the-html5-canvas/
Sent from my iPhone
On 2010-07-16, at 12:07 AM, Bill Humphries <[email protected]> wrote:
On Jul 15, 2010, at 2:07 PM, Remi Grumeau wrote:
Asking myself the same, let s investigate and report here :)
Le 15 juil. 2010 à 07:30, Excell <[email protected]> a
écrit :
Hello
I am sure this has been asked before.
I want to store an image into ipad/iphone database using javascript.
Is this possiable?
If so can someone point me to an example of how to do it!
I spent some time this evening playing with that idea.
One solution: Canvas supports a method, toDataURL(), that will
return the current context as a data url which you could then write
to the key/value or SQLite storage in your webapp.
In this example, I load an image, write it to a canvas, generate the
data url of the canvas, then write it out the to the page and the
console. One could, of course change the appropriate callback, in
this case img.onload in the singleton class, to write to local
storage.
Note the caveats for image size and data checks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Image Serializer</title>
<style>
figure {
display: block;
clear: both;
width: 60%;
padding: 1em;
border: thin solid black;
}
p.url {
word-wrap: break-word;
width: 80%;
font-family: monospace;
}
</style>
<!--
Using JQuery for connivence sake
-->
<script src="jquery-1.4.2.min.js"></script>
<script>
// Singleton class providing a method to convert an image to
a data URL
// CAVEAT: will fail for large images
// CAVEAT: needs additional type and value checks
imageSerializer = new function() {
var c = document.createElement('canvas'); // an off-
screen canvas element
var img = new Image(); // an image element to load into
var context; // canvas drawing context
var data_url;
var display_img;
var data_url_text;
return {
// converts the image specified in @src to a data URL
// then sets it as the innerHTML property of the
element with id @text
// and as the src attribute of the image element
@display
serialize: function(src,display,text)
{
display_img = display;
data_url_text = text;
context = c.getContext("2d");
context.clearRect(0,0,1000,1000);
img.src = src;
img.onload = function()
{
context.drawImage(img,0,0);
data_url = c.toDataURL();
document.getElementById
(data_url_text).innerHTML = data_url;
// $('#seralized').replaceWith(data_url);
// makes JQuery explode
$('img#' + display_img).attr("src",data_url);
console.log("image was serialized as " +
data_url.substr(0,50) + "…");
}
}
}
}();
$(document).ready(function()
{
// on submitting the form, attempt to serialize the image
href
$('#select').submit(function(event) {
event.preventDefault();
var filename = $('input#filename').val();
imageSerializer.serialize(filename, "from_data",
"serialized");
});
});
</script>
</head>
<body>
<form id="select" method="GET" action="">
<label for="src">Image to Serialize</label>
<input type="text" id="filename" name="filename" />
<input type="submit" >
</form>
<figure>
<img src="" id="from_data">
<figcaption>The Image Rendered from Data</figcaption>
</figure>
<p class="url"><strong>Serialized image is:</strong> <span
id="serialized">…</span></p>
<p>© 2010, Bill Humphries</p>
<p><a rel="license" href="http://creativecommons.org/licenses/by/3.0/
"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png
" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/
">Creative Commons Attribution 3.0 Unported License</a>.</p>
</body>
</html>
An elaboration on this would be to load one image as a sprite, then
loop over the slices, saving each one as a separate data URL. Put
the sprite image source in the application's cache manifest, use the
application cache API to detect an updated sprite image, and
regenerate the slices.
Cheers.
Bill Humphries
http://whump.com/
--
You received this message because you are subscribed to the Google
Groups "iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to [email protected]
.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en
.
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
