JayData has been supporting blobs for some time but so far binary data was converted to base64 strings. From 1.3 we improved blob handling and now blob is a binary stream. The new internal converter subsystem allows easy conversion from many types to blob and vice versa, so you can convert from the following types to $data.Blob with a simple assignment:
- String
- Array
- Number
- Boolean
- Blob
- Uint8Array
- Buffer
- Object
$data.Blob has many functions so that you can do explicit conversion:
- toString()
- toBase64()
- toArray()
- toHexString()
- toDataURL()
Let’s create a simple code which downloads images from the net and stores them in local storage:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$data.define(<span class="str">"Hero"</span>, { id: { type: <span class="str">"int"</span>, key: <span class="kwrd">true</span>, computed: <span class="kwrd">true</span> }, image: $data.<span class="str">Blob </span></code><code class="language-javascript">}).setStore(<span class="str">'default'</span>, { name: <span class="str">'local'</span>, tableName: <span class="str">'FlightHeroes'</span>, databaseName: <span class="str">'FlightDb'</span> }); <span class="kwrd">function</span> downloadImage(url) { <span class="kwrd">var</span> xhr = <span class="kwrd">new</span> XMLHttpRequest(); xhr.open(<span class="str">"GET"</span>, url, <span class="kwrd">true</span>); xhr.responseType = <span class="str">"arraybuffer"</span>; xhr.addEventListener(<span class="str">"load"</span>, <span class="kwrd">function</span> () { <span class="kwrd">if</span> (xhr.status === 200) { <span class="kwrd">var</span> hero = <span class="kwrd">new</span> Hero(); hero.image = xhr.response; hero.save(); } }, <span class="kwrd">false</span>); xhr.send(); }; downloadImage(<span class="str">'http://upload.wikimedia.org/wikipedia/commons/6/62/Bob_Hoover_2005_Gathering_of_Eagles_Lithograph.jpg'</span>); downloadImage(<span class="str">'http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/ChuckYeager.jpg/471px-ChuckYeager.jpg'</span>); |
Now let’s retrieve the images from local store and put them onto the screen:
|
1 2 3 4 5 6 7 8 9 10 |
<span class="kwrd">function</span> showAll() { Hero.readAll() .then(<span class="kwrd">function</span>(heroes){ heroes.forEach(<span class="kwrd">function</span>(hero) { $(<span class="str">'<img>'</span>) .attr(<span class="str">'src'</span>, $data.Blob.toDataURL(hero.image)) .load(<span class="kwrd">function</span>() { $(<span class="str">'#images'</span>).append($(<span class="kwrd">this</span>)); }); }); }); } |
