Sending HTML5 Canvas image as embedded image in email over google app engine

Question

I'm running an application in Java on GWT + GAE

I want to get the contents of my html5 Canvas (GWT Canvas class) and get them saved in a permanent and web addressable file

Example: http://myserver.com/images/image_434.png

When I get the canvas contents using canvas2.toDataUrl() ...

1- Is it possible to post those contents to a PHP web API via an HTTP request and then use PHP (on my server) to decode the 64bit image and write it to file and return back a permalink.

Or

2- Is it somehow possible to send that image data of RPC to the server side, save it to a file (ImageIO is blocked in GAE) and then embed that file somehow in an email and email it to my server.

I'm confused because:

Method 1: I doubt will work, posting a parameter that long, I'm not sure but I have a gut feeling that will not work.

Method 2: If I can figure out how to embed the image in mail without having a solid file URL (by writing the stream to the message body directly somehow) would probably work.

As you can see, I'm generally confused about this. It shouldn't be this hard to do this and I can't be the only one trying to do this... though I've been searching for 3 days now.

Thanks

Answer 1

• Client side (GWT):

1- Get the base64 encoded image URI

String imageData= canvas2.toDataUrl();

2- Send the image data through an RPC call to the server side

jdbc.saveImage(imageData,callback); 

• Server Side (GAE):

3- Make an HTTP Post request to your web server API

        URL url = new URL("http://myserver.com/my_images_folder/save_image.php");
        URLConnection conn = url.openConnection();
        conn.setReadTimeout(15000); //set a large time out since we're saving images
        conn.setDoOutput(true);
        OutputStreamWriter wr = new OutputStreamWriter(conn.getOutputStream());
        wr.write(data);
        wr.flush();

        // Get the response which contains the image file name
        BufferedReader rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
        String line;
        while ((line = rd.readLine()) != null) {
            resa+=line;
        }
        wr.close();
        System.out.println("close1");
        rd.close();
        System.out.println("Received: "+line);

• Server Side (Your Web Server -php API):

4- save the image to your file server and return an image file name

    if (isset($GLOBALS["HTTP_RAW_POST_DATA"])){
        $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

        //using a timestamp to create unique file names
        //you can pass file name in params if you like instead
        $fileName='User_Images_'.time().'.png';

        // Remove the headers (data:,) part.  
        $filteredData=substr($imageData, strpos($imageData, ",")+1);

        // Need to decode base64 encoded image
        $unencodedData=base64_decode($filteredData);

        $fp = fopen( $fileName, 'wb' );
        fwrite( $fp, $unencodedData);
        fclose( $fp );
    $fileName2='http://myserver.com/my_images_folder/'.$fileName;

    //return the file name
    echo($fileName);
 }else{
    echo('no data posted');
 }

Now that I have a hard permalink to the file I can embed it in emails and do other stuff with it. See reference 3 below for inline embed (which requires a file or a URL, now that we have a hard URL to the image on our web server, we can email it out)