asked on

How to save a canvas in an image on the server

Hi,

Going on with canvas now I want to save my canvas that I've created on the server in an image.

Here is the code that enables me to have the data of the canvas

var canvas = document.getElementById("myCanvas_OUT0");
var context = canvas.getContext("2d");
var pixout0 = context.getImageData(0, 0, 75, 100).data;

Open in new window

Does some one know how to convert this in a png or jpeg image and save it in a directory please?

Thanks!

Ray Paseur

Please give us a bit of help with your question. Set up the SSCCE* so that we can copy / paste your code into our code editors and save it on our servers. Then we can run it and get the same results you get. Once we have that foundation we can experiment with the test case and collaborate on a solution.

Thanks, ~Ray

* Required reading for software developers!

DavidInLove

ASKER

HI here is a working code to create the canvas and get back the data.

I just now want to save it in an image on the server.

Thanks for your attention!
David

<!DOCTYPE html>
<html>
<head>
<title> EE Q_28383720 </title>
<script src="http://code.jquery.com/jquery.min.js"></script>

</head>
<body>
I want to save the canvas created in an image on the server when I click on it </br>

<canvas id="myCanvas_OUT21" width="75" height="100"></canvas>
	


<script>

var contextout0, contextout21;


	$("#myCanvas_OUT21").click ( function()
		{
		
		alert("Here I want to save the canvas created in an image on the server");
		
		
		//Here is the data of the canvas How can I convert it in an image and save it on the server?
		var canvas = document.getElementById("myCanvas_OUT21");
		var context = canvas.getContext("2d");
		var pixout21 = context.getImageData(0, 0, 75, 100).data;

		//alert(pixout21[0]);
		});


$("document").ready( function() {  


	
	
	var canvas_out21 = $("#myCanvas_OUT21");
	var canvasout21Position = {
		x: canvas_out21.offset().left,
		y: canvas_out21.offset().top
	};
	var elemout21 = document.getElementById("myCanvas_OUT21");
	if (elemout21 && elemout21.getContext) 
		{
		  contextout21 = elemout21.getContext("2d");
		  

			
		}
	
	var imgdout21 = contextout21.getImageData(0, 0, 75, 100);
	var pixout21 = imgdout21.data; //new Array();

	
	//FILTER THE DATA
	//This I do here in a simple example 
	
		for(j=0;j<75*100*4;j+=4)
		{ 
			if (j%5)
			{
			
			pixout21[j]=255 ;		
			pixout21[j+1]=255;		
			pixout21[j+2]=255 ;		
			pixout21[j+3]=255;	
			

			}
			else
			{
			pixout21[j]=100/3 ;		
			pixout21[j+1]=100[j+1]/3 ;		
			pixout21[j+2]=100[j+2]/3 ;		
			pixout21[j+3]=255;	
			
			}
		}
	
	
	
	//DISPLAY DATA IN The myCanvas_OUT21
	
		contextout21.putImageData(imgdout21, 0, 0);
	
		});
		
		


</script>

</body>
</html>

Open in new window

Ray Paseur

This will take me a while, but it's a great question and I'm fairly certain I can produce a demonstration script from the code you've provided. The theory is this: Each pixel of the canvas is a pixel of the image. Each pixel has 4 channels: Red, Green, Blue and Alpha (transparency). The pixels are numbered from zero to "n" in modulo 4. Pixel zero at the top left has 4 bytes associated with it, one for each channel. Pixel one, immediately to the right of pixel zero, has the next 4 bytes, etc. To make an image in PHP you will have to know the canvas dimensions, width and height, so you can create an image resource of the correct dimensions. Then it's just a matter of filling in the pixels of the image resource one at a time with the appropriate color and transparency.

In PHP the alpha channel values only go up to 127 (not 255) so that bit of data has to be interpolated. My guess is that the RGB values are consistent across JS and PHP.

DavidInLove

ASKER

Hi,
Thanks for your time!

On the internet I see people speak of base64_encode($str); that seems to tell about image
coding but I don't know really what it is.

Wait a little I've found some code that create an image to download it from canvas.
Only I would like also to store it in a directory

I will put the PHP code tonight in this post.
You may find an easy way to store the image created on the server and not only download it.

Happy to hear from you!
David

Ray Paseur

I've gotten some of this into a "sensible" model, but not all of it. There may be a setting in my server that is causing trouble and more research is needed to figure that out.

I can capture the data from the canvas in four-byte chunks giving R, G, B, and A values. But when I try to send this data to my server with an AJAX request, I only get the first 5,000 elements in the $_POST array. I may need some other form of encoding to get all 30,000 of the data elements from the canvas in this test case.

I do not believe that base64_encode() is needed here.

More to follow...

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DavidInLove

ASKER

Thanks Slick812,

Your solution works perfectly on my server too!

Sorry for other EE contribution but I must give all the points here to stay honest.

David

Ray Paseur

Glad you're OK with the solution. But I found that the images looked different after the transfer to the server. Using Chrome at latest release.

Member_2_248744

@ray, they are suppose to look different, examine the -
<canvas id="cv1" width="25" height="25" style="width:56px;height:56px;border:2px solid black;"></canvas>

which increases the actual height and width from 25 pixels to a displayed of 56 pixels

if you look at the javascript I add a violet-red rectangle to canvas just before server send.

I use a small canvas 25x25 just so I do not have to deal with large string debug for development.

works great in my chrome. If not work, do you have a fix?

Ray Paseur

Hey, Slick812 - it's not up to me. If the answer is good for the Author of the question, that's fine. I was only offering an observation that the image in the canvas and the image stored on my server looked different. Whether that's a "bug" or a "feature" is open to interpretation. As long as the Author is happy, I'm happy.

DavidInLove

ASKER

I've included it in my website and haven't seen really buggs too.
It is true that I haven't tested all the browsers...
But It's OK for me.
Best regards
Thanks to both of you.
Dave