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

Discussion in 'Web Design and Development' started by Somnath, Oct 7, 2010.

  1. Somnath macrumors newbie

    Oct 7, 2010
    I'm working with HTML/HTML5 and JavaScript only. Div element 'canvasesdiv' contains three HTML5 canvases.

    <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"/>
    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.

  2. angelwatt Moderator emeritus


    Aug 16, 2005
    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.
  3. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    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:

    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.

    <canvas id=canvas width=200 height=200></canvas>
          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");
  4. Somnath thread starter macrumors newbie

    Oct 7, 2010
    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

    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?
  5. angelwatt Moderator emeritus


    Aug 16, 2005
    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.

Share This Page