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);
Related
Is there a way to prevent people from just inspecting your website and downloading paid fonts via the Chrome Dev Tools window? Right now all I have to do is go to the Sources panel and Save link as / Open in a new tab, and I can download it.
Is there way to prevent this? Obfuscate or atleast make the process difficult?
1.
First, never create a physical link to the font itself. (Until a licence fee for that font has been paid for.)
2.
Use an image processor (i.e. ImageMagick) to create an image of the typeface sample(s)† and display that image as the sample on screen.
If you use these two steps above, there will not be an actual font file that they may download in an unwarranted manner.
3.
Allow only users those who have paid the licence access to the font zip file.
† Here is a working php sample of using ImageMagick to create an image of a typeface:
<?php
error_reporting(E_ALL);
ini_set( 'display_errors','1');
// Create a new imagick object
$im = new Imagick();
// Create new image. This will be used as fill pattern
$im->newPseudoImage(50, 50, "gradient:red-black");
// Create imagickdraw object
$draw = new ImagickDraw();
// Set font/typeface
$draw->setFont("path/TheTypeface.ttf");
// Set font size to 72
$draw->setFontSize(72);
// Annotate some text
$draw->annotation(20, 50, "Hello World! This is my font sample!");
// Create a new canvas object and a white image
$canvas = new Imagick();
$canvas->newImage(350, 70, "white");
// Draw the ImagickDraw on to the canvas
$canvas->drawImage($draw);
// Set the format to PNG
$canvas->setImageFormat('png');
// Output the image
header("Content-Type: image/png");
echo $canvas;
?>
You will have to dicker with these settings, to get what you want. ImageMagick must be installed first, of course.
Note:
I'm going to be travelling internationally over the next few days which precludes Web access for me (programmer's heaven, right?). If you have any questions, please comment them here, and I will answer them when I land.
All the best. Sounds like a fun project.
Is there a way in HTML5 Canvas that allows me to type out a sentence into a text box and it puts that text onto a banner image and then allows me to save that image as one with text?
The reason I want to do this is that it's for a flyer builder so people without any software to edit banners can just choose a banner template that I've made without any text and then type in there own and then output the banner to the flyer as one image.
I know that there are things Canvas can do like typing onto images but I want to know if its possible to output the image to a set destination.
Thanks in advance.
I understand that your text - that the client can type - is drawn in the canvas?
If so - there is a way to save your entire canvas as an image.
you can use a div as a preview image of the drawing, and generate it like this:
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
Here's a fiddle http://jsfiddle.net/GnH8E/
The first image is the canvas - the next is the image prewiew.
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 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/
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).