Pixastic crop/blend example w/o seeing cover image

Feature
1> desaturate
2> File save
3> Crop (with pre-defined identical size of frame-image)
4> Blend (blend in a preset image)
Pixastic handle function must be placed under "$(window).load(function() "
otherwise, it won't be able to be triggered!!!

Problem is: must have relative path, can't be "http://....." due to security issue
[this example only works on your OWN HTTP host"

so, to solve this problem, you can't use src="http://....." these kinds of REMOTE image.
You have to use src="/../../image.png" as an local image with relative path, but this can't be achieved under blogspot's image upload. (the image storage has a different domain name other than your own blogspot page)

Solution is:
"src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASA....."
embed the " the="" /> with DataURL, so this will make your HTML code really long just because the image is large to express in ASCII.

For each image, you have to finde out get the "data:image/jpeg;base64,/"?
It's it just takes you to read the image with canvas, use "canvas.toDataURL" and save as text file.
We'll try to provide an example in next page

After click, the 'img' becomes 'canvas' by Pixastic
****In this version: once the file is loaded and displayed in a IMG object, javascript will convert it to CANVAS object for following manipulation and FILE output***

Resert, 'canvas->img'

Show the image only, and be able to download in a new page, the input is Canvas

Download the image as file (fired by Javascript, with Mathrand to generate different file name), the input is Canvas
Download
Download the image as file (fired by HTML onclick=), the input is Canvas


Further Process:

Here we use an to display a "LOCAL" image with DataURL type (such as src="data:image/jpeg;base64,/9j/4AAQSkZJRg...)
This place should be the cover image's display area, to make it disappear, we use style="display:none" to make it vanish.