WebRTC + Preloaded Frame Process

Let's Play Fun!
CAUTION: still need to fix the "vertical picture"'s cropping
DD Ref:
1.Basic Tutorial: MDN WebRTC Tutorial
2.Cross Compatibility: Cross-Browser-Compatible-WebRTC
This example is (1) + (2)'s window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

Pixastic: A photo blend integration

This is an example of Pixastic "crop", "resize", and "blend"

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

Get Picture's DataURL string

To manipulate canvas's data, the image data must be local, or in relative path.
BSP doesn't have this kinds of environment, but that doesn't mean you have to pay for a Webhost.
Simply embed "DataURL" object code in  img is enough.
This page help you to generate data:image/png;base64

Pixastic crop/blend example

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

Pixastic desaturate & download processed image file

desaturate demo with File Save sample (3 methods)
1> directly bring up new window/tab to browse image (window.location.href)
2> use javascript to manipulate a anchor () and set URL as image's DataURL, then make a click
3> a anchor()  with onclick event similar to method-2.