Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How can I save div as image where div contains one or more than one HTML5 Canvas?

S

Somnath

macrumors newbie
Original poster
Oct 7, 2010
2
0
I'm working with HTML/HTML5 and JavaScript only. Div element 'canvasesdiv' contains three HTML5 canvases.

HTML: 
<div style="position: relative; width: 400px; height: 300px;" id="canvasesdiv">
    <canvas width="400" height="300px" style="z-index: 1; position: absolute; left: 0px; top: 0px;" id="layer1" />
    <canvas width="400" height="300px" style="z-index: 2; position: absolute; left: 0px; top: 0px;" id="layer2"/>
    <canvas width="400" height="300px" style="z-index: 3; position: absolute; left: 0px; top: 0px;" id="layer3"/>
</div>

How can I save an image combining all canvases present inside the div 'canvasesdiv' at client side using JavaScript? In my case I don't have any option to do any server side job.

Regards,
Somnath
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
I don't believe you can. You're able to save individual ones, but not combined. Maybe though, you create an additional canvas and draw each layer onto to it in the right order, essentially flattening it, then present that new canvas to the user.

It also depends on if you're trying to allow the user to save the image, or if you want to save the image to your server. You won't be able to save to the server as far as I can think of.
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
HTML5 provides Canvas.toDataURL(mimetype), which is implemented in Opera, Firefox, and Safari 4 beta. Otherwise, test to be sure the following works:


A great library, pure Javascript, to turn an HTML5 canvas into an image:

http://www.nihilogic.dk/labs/canvas2image/

For the native code approach (no external libaries) this code accomplishes what you asked for generally, but it uses a single canvas. You'd need to experiment with multiple instances, but this should get you rolling in the right direction, hopefully.

HTML: 
<canvas id=canvas width=200 height=200></canvas>
 <script>
      window.onload = function() {
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2d");
          context.fillStyle = "green";
          context.fillRect(50, 50, 100, 100);
          // no argument defaults to image/png; image/jpeg, etc also work on some
          // implementations -- image/png is the only one that must be supported per spec.
          window.location = canvas.toDataURL("image/png");
      }
 </script>

-jim
 
S

Somnath

macrumors newbie
Original poster
Oct 7, 2010
2
0
angelwatt said:
Maybe though, you create an additional canvas and draw each layer onto to it in the right order, essentially flattening it, then present that new canvas to the user.
Click to expand...

Thanks for your great idea. I'm ready to do that. Well HTML5 allows extracting pixel wise data (BMP) information. I found it in a blog http://www.nihilogic.dk/labs/canvas2image/

Let’s think I have collected BMP data of three HTML canvases. Now next step I'm going to redraw those BMP information one after another in a new canvas. Can you tell me how can I draw the BMP information in a new canvas get the final image. Is it possible? Any Idea?
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Yes, it's certainly possible. I've implemented a few graphic algorithms like Gaussian blur and edge detection using canvas. You just have to grab the pixel data from the canvas and use a for loop to go through them.

Here's a decent tutorial that should get you going. I'll have to track down my code from the algorithms. Not sure where they are currently.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom