HTML5 - Attach image to mail using Java EE - javascript

I am developing an a drawing application using Javascript.
Users will be able to draw on a canvas. Once they are done with drawing, they will be able to convert it into an image (Convert to image button).
This is the code:
function putImage()
{
var canvas1 = document.getElementById("canvas");
if (canvas1.getContext)
{
var ctx = canvas1.getContext("2d");
var myImage = canvas1.toDataURL("image/png");
}
var imageElement = document.getElementById("MyPix");
imageElement.src = myImage;
$('#submit_btn').closest('.ui-btn').show();
}
There's a submit button and when the users click on it, the application will redirect to another page whereby the user will be able to send an email (using java mail) with the image attached to it.
The page allows user to type in the email address that they wanna send to, and the body of the email.
May i know how to make the image auto-attach to the email so that the after the user type in the email address and the body, they will be able to send the mail?
Thanks in advance!

To send the image as an attachment with javamail, you need the bytes from say a jpg or bmp. What you'll need to do is send the model, eg the coordinates, to the server and recreate the image server side. Perhaps a html5 canvas has direct support for outputting the images as bytes, I don't know, but that would help. In that case you'd simply transfer those bytes to the server for attaching to the mail.

HTML5 Canvas has a cool api trick to do this:
var encodedImage = canvas1.toDataURL(); //this generates base64 encoded image in png
//for jpeg
var encodedImage = canvas1.toDataURL("image/jpeg");
Now you can store that encodedImage in back-end in a table or file. If you want to show it on a page, just assign it back to html img tag to source property

Related

Retrieving the absolute URL of a temporary canvas element on page

I created a coupon-creator system that uses HTML 5 canvas to spit out a jpg version of the coupon you create and since I'm not hosting the finalized jpg on a server, I am having trouble retrieving the URL. On some browsers when I drag the image into the address bar all I get is "data:" in the address bar. But on windows, if I drag it into an input field, sometimes it spits out the huge (>200 char) local-temp url. How can I use javascript(?) to find that exact temporary URL of the image generated by my coupon creator and be able to post it on an input form on the same page? Also, it'd be very helpful if you guys know the answer to this as well, as I assume it is correlated with the retrieval of the URL: When I click the link that says "Save it" after it's generated, how can I have it save the created image to the user's computer? Thanks a lot!
This is what I'm using in JS right now to generate the image:
function letsDo() {
html2canvas([document.getElementById('coupon')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/jpeg');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
var mycustomcoupon = new Image();
mycustomcoupon.src = data;
//Display the final product under this ID
document.getElementById('your_coupon').appendChild(mycustomcoupon);
document.getElementById('your_coupon_txt').style.display="block";
}
});
}
Here is the live URL of the creator: http://isleybear.com/coupon/
I ended up dumping this code into the js stated above. It was a pretty simple fix. Then to test it, I set an onclick html element to show the source.
var mycustomcoupon = document.getElementById('your_coupon');
mycustomcoupon.src = data;
}
});
}
function showSource(){
var source = document.getElementById('your_coupon').src;
alert(source);
}

Upload photo into facebook from html5 canvas

In my jsp page, I have a manipulated photo within a html5 canvas and I want to upload it to facebook upon clicking the upload button.
FacebookType publishPhotoResponse = facebookClient.publish("me/photos", FacebookType.class,
BinaryAttachment.with("test.jpeg", getClass().getResourceAsStream("xxx")),
Parameter.with("message", "Test"));
out.println("Published photo ID: " + publishPhotoResponse.getId());
I am using Restfb for the uploading part in my servlet. However, I have no clue what attribute is needed for me to pass over to servlet side for processing (for example: "xxx"). When I used toDataURL, the URL of the image is base64. Does facebook api allows me to upload photo using the base64 format?
var base64URL = document.getElementById('canvasImg').src;
var decodedURL = escape(window.atob(base64URL));
alert(decodedURL);
The above coding seems to contain error as it won't display the alert. Should I decode the base64 data first before handling it over to servlet or should I pass the whole base64 data to servlet to handle the decoding?

Cannot capture image from virtual signature HTML5 canvas in Javascript

I am using this as a virtual signature pad: http://thomasjbradley.ca/lab/signature-pad/ . It can either automatically generate a signature from a typed name or let the user sign with their mouse. I need to capture the image and send it to a Java server. It uses an HTML5 canvas.
It works correctly for the drawn image, but trying to capture the automatically generated image results in a blank image with no text.
I am using this code as it said in the site's API section:
var api = $('.sigPad').signaturePad();
autoGeneratedData = api.getSignatureImage();
and then sending autoGeneratedData to the server.
I also tried to capture the canvas directly:
var canvas = document.getElementById('sigCanvas');
var imageData = canvas.toDataURL('image/png');
but ran into the same issue.

Uploading JavaScript generated image to Django

I have an image generated on the client side which I want to transfer to the server through a form. For example, let's say that I have a registration form in which the profile image is generated automatically by JavaScript, and I want to transfer that image to django.
What is the best way to transfer the image binary data to the server when user hit the submit button? what form field should I use?
thanks!
Found an answer myself, here's the solution in case someone needs it:
In the client side, this is how you get the image from canvas and set it to a form field (a hidden char field):
var dataURL = document.getElementById('canvas_id').toDataURL("image/png");
document.getElementById('id_hidden_image_field').value = dataURL;
And in django side:
add to the form a hidden field called 'hidden_image_field', which will be used to pass the data. this field is a simple CharField. you can add max_length limit to make sure image is in a reasonable size (note: not dimensions but actual size).
to parse the image data:
import re
import base64
dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
ImageData = request.POST.get('hidden_image_field')
ImageData = dataUrlPattern.match(ImageData).group(2)
# If none or len 0, means illegal image data
if (ImageData == None or len(ImageData) == 0:
# PRINT ERROR MESSAGE HERE
pass
# Decode the 64 bit string into 32 bit
ImageData = base64.b64decode(ImageData)
and now ImageData contains the binary data, you can simply save to a file and it should work.
hope this helps.

let user manually crop image with specific size as output

I'm trying to find some plugin on tutorial on the following:
I want that users on my website can upload an image, which will be used as thumbnail,
though the tumbnails has a specific hight/width, so the image should be cropped.
Though because those images will be images of the persons themselves, I cannot simply autocrop it. I need something that gives the user the possibility to choose which part of the image will be used. So that they can just select their head as profile image for example.
Thanks in advance!
In php & imagejpg (uses GD) you could do:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w = $targ_h = 150;
$jpeg_quality = 80;
$src = 'upload/test.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
imagejpeg($dst_r, 'path/to/output.jpg', $jpeg_quality);
exit;
}
Instead of GD you could also use ImageMagick to do your server-side processing based on the canvas-coordinates you send back to the server.
However... you could also send the raw data from canvas.. canvas can render jpg (client-side) to, then you base64 encode it and upload it (again, but this time as the thumbnail that was created in canvas).
Hope this helps!

Categories