I want to store the Image into my Server side Database. Once the user draw using canvas and hit a Submit button , Canvas Element should be converted to image format and then I want to store that Image into my database for further use. I can use this image to verify the user next time he visits my site.
Can anyone help me to sort it out? My server code is written in Java Servlets
Use Canvas.toDataURL() which will return a string with a base64 encoded PNG. You can then store it as a normal text or decode and save as a file. To put it back on canvas you simply pass this string as a source for Canvas.draw(source, 0, 0) method
Fiddle for you: http://jsfiddle.net/9a7Xd/
Related
I am studying HTML5. I want to create / draw some shapes in canvas and save it in MySQL database and restore it in the canvas itself.
I followed this tutorial
And saved the data in database. I got this in my database column
data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAEAUlEQVR4nO3dv48VVRgG4DcRtjEWJBQbOhortYQ%2FASOtyWpCBQkWFtQm1jTGnlBQEV2NCTWVfwCVNiRsZSwwuFRsRAJ7sbjBrLkz98cyO9%2Bc%2BDzJtJv3NPvmzHfO3AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOL7tJLMkr3ue2ZHneZL7NTEBmJLt9BfHps%2BbkjlM8jTJlRHXAcCIhiyPTUtmluQgyb0TXyUAg%2Bp7ZTXreMYumTc5bp7Y6gE4lr5S2N7gb9zPfB4yRtE8Pu5CARhW1z%2F7TcpjXVcyn4UcZpiSmSU5cwI5AdjA0Z3DSZTHJu5lPg8ZcjczS7I35iIAmIYzGfa12KskO6OuAIByjzP8gH6W5GWSJ0lujbcUACrcTPcpsZM6OTZL8mCUlQEwKTuZD%2FCH2rk8S3Ju1BUAMAl7GXZ3cmPc%2BABM0a3M5yEvs%2FlrsKMzlf3M78hcGDc%2BAFNzI8OeBpvFN8IA%2FnfOZT4HUSQAvJUHGeZ2vSIB4F8XMp%2BF7Ge9uYoiAWCpq1EkALyFdYrkWlk6ACZvVZG8TrJblg6AyVunSH4rSwfA5H2Z1UXyd5KzVQEBmLazSV5k9RHgO1UBAZi%2B37P6PslhkttVAQGYtt2sdzlRmQDQ6VrWvwE%2FS%2FJ%2BTUwApux21vvNk2dVAQGYvnXK5GFZOgCacCfLX3PdrYsGQAu%2ByPIdydW6aAC04G6WD9o%2FqosGQAsepr9IHhXmAqARy35Z8XphLgAa8EH6B%2B0HhbkAaMSP6d%2BNfF%2BYC4BGHKR%2FyP5eYS4AGnA9%2FbuRrcJcADTiUbp3IkoEgJU%2BjBIB4Ji20n1S693KUAC0oa9EzleGAqANW%2BkerF%2BuDAVAG%2FpK5KvKUAC0Yz%2BLJfJDaSIAmvFrFkvkl9JEADTjpyyWyJ%2BliQBoxtfpvityqjIUAG24nO7h%2BqXKUAC04Xy6S%2BS7ylAAtOF0kldZLJEXSd4pzAVAI3azWCKHSS5WhgKgDZfS%2FfmTbypDAdCGU0meZ7FEnsQXfQFYw7fpnot8XBkKgDZcTPeAfS%2FJ54W5AGjA6SR%2FpPu476eFuQBoxCdJ%2Fsp%2FC2SnNBEAzdjK%2FLjvz0k%2BK84CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADABv4B7KWsU334yWgAAAAASUVORK5CYII%3D
In one of my page I just need to render the saved image in a canvas...
Anyone please advice ?
the src attribute of an image can be a data-url - base64-encoded binary image data. The function canvas.toDataURL(); converts the content of the canvas to such a data URL. The code in the tutorial you posted then runs it through the encodeURIComponent function to get it into an ajax-friendly format.
When you retrieve that string from the database later, you need to run it through decodeURIComponent (this will replace %3A with :, %2F with a / and so on to turn it back into a syntactically correct data-url) and then assign the resulting string to a new Image() element. You should then be able to draw this image to a canvas.
I am currently experimenting with the HTML5 Canvas.
I currently made a simple little painting app where you can draw lines and what not.
I made it so I can save the image in base64. with
var dataUrl = document.getElementById('your-canvas').toDataURL();
I was wondering if it is possible to take that image, and save it to my server (or anywhere) replacing/overwriting an image that is already there.
The goal of this is to have the saved image as the background for the canvas. Then every time someone draws on the canvas and clicks save, it saves their drawing as the background image so the next person who goes on it can see what the last person drew.
Basically a public internet whiteboard.
Can someone tell me if this is possible, and point me in the right direction (code languages, tutorials, etc.)?
Thanks.
You can display or save image like this：
$imgData = $_POST['data'];
$imgData = str_replace(' ','+',$_POST['data']);
$imgData = preg_replace('/^data:image\/(png|jpg);base64,/','',$imgData);
header("Content-type: image/png");
echo base64_decode($imgData);
I am using Canvas2Image() function to convert an canvas element to Image of jpg (or) png format. I want to know where will this image be stored and how can I access the converted image?
As I read the documentation the user will be prompted to save the image as they wish. Additionally you cache make the function return a html img element if that's what you want.
But you can't save the image to the HDD and then modify it.
I try this, but I don't succeed. Is there a posibility to save that object or their values and then use it , e.g. for a redraw?
Instead of saving the image data array (which is uncompressed), I would suggest using Canvas.toDataURL to get a base64-encoded PNG for the canvas, and saving that string.
Later, you can draw this data URL to your canvas.
I have asked this question before but now with more elaborate way. I working on this for past two months and the result is zero.
All i need is .i am allowing the client to create a diagram by dropping the images on a div whose background is a esri Map . When they clik save ,the snapshot of the whole div has to be saved as image in database.
If some one could suggest activx plug-in for taking print screen ot capture the client screen .pls suggest
EDITED
I tried something like savefrom URL ,but i dont want to save the whole page ,only div.
HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create(url);
WebResponse myResp = myReq.GetResponse();
and
WebClient myWebClient = new WebClient();
// Download home page data.
Console.WriteLine("Downloading " + remoteUri);
// Download the Web resource and save it into a data buffer.
byte[] myDataBuffer = myWebClient.DownloadData(remoteUri);
I would be more focused on extracting/scraping the div locations (that the user's dragged) and passing them off to the server so it can be processed. The processing would include creating a Bitmap, placing the ESRI Map as the background (with any applicable off-sets), then overlaying the "movable/dragged" DIVs [more specifically, the images that are associated to them] on top of that base, then exporting the whole entry as a "Screenshot".
You should be looking more at reproducing the outcome instead of capturing it (at least if this is planned for a web-client implementation).