#cap is a div i want to capture. I used ctx.drawImage($('#cap').get(0),0,0,640,480);window.open(canvas.getDataURL('image/jpeg'));

got a Type error and how do i send it to php to save as a.jpeg

UPDATE

/ is not working help html2canvas is not a function

#cap is a div i want to capture. I used ctx.drawImage($('#cap').get(0),0,0,640,480);window.open(canvas.getDataURL('image/jpeg'));

got a Type error and how do i send it to php to save as a.jpeg

UPDATE

http://jsfiddle/3qNJB/ is not working help html2canvas is not a function

• javascript
• php
• jquery
• canvas

2 Answers 2

< DIV > elements cannot be drawn on canvas using drawImage() method.Have a look at Html2Canvas library

Example:

 html2canvas(document.getElementById('DivToCapture'), {
      onrendered: function(canvas) {
         // document.body.appendChild(canvas);
       window.open(canvas.toDataURL('image/jpeg'));
     }
  });

Heres the Fiddle

Instead of opening the image with javascript, just POST it to your server so PHP can receive it, save it on the server, and then send it back to the browser.

I found this DivsToJPG() function here: Convert html div having multiple images to single image using javascript

var DivsToJPG = function( parent ) {
    this.canvasSizeX = 0;
    this.canvasSizeY = 0;
    this.init = function( parent ) {
        this.images = parent.find('img');
        this.setSizes();
        this.createCanvas();
        this.drawImages();
        this.exportJPG();
    }

    this.setSizes = function() {
        for (var i = 0, l = this.images.length; i < l ; i++) {
            var currentImage = this.images.eq(i);
            var posX = currentImage.position().left;
            var width = currentImage.width();
            this.canvasSizeX = this.canvasSizeX > (posX+width) ? this.canvasSizeX : posX + width;
            //console.log(this.canvasSizeX);
            var posY = currentImage.position().top;
            var height = currentImage.height();
            this.canvasSizeY = this.canvasSizeY > (posY+height) ? this.canvasSizeY : posY + height;

         }
    }

    this.createCanvas = function() {
        this.canvas = document.createElement('canvas');
        this.canvas.id     = "exportCanvas";
        this.canvas.width  = this.canvasSizeX;
        this.canvas.height = this.canvasSizeY;
        this.ctx = this.canvas.getContext("2d");
        document.body.appendChild(this.canvas);
    }

    this.drawImages = function() {
        for (var i = 0, l = this.images.length; i < l ; i++) {
            var currentImage = this.images[i];
            var $currentImage = this.images.eq(i);
            this.ctx.drawImage(currentImage, $currentImage.position().left, $currentImage.position().top, $currentImage.width(), $currentImage.height());
        }
    }

    this.exportJPG = function() {
        var dataURL = this.canvas.toDataURL();
        this.img = document.createElement('img');
        this.img.id = "createdImage";
        this.img.src     = dataURL;
        document.body.appendChild(this.img);
    }

    this.init( parent );
}

var divsToJPG = new DivsToJPG($('#cap'));

$.ajax({
  type : "POST",
  url  : "make-image.php",
  data : { 
     imgBase64 : divsToJPG
  }
}).done(function(data) {

});

Then in PHP

$img = base64_decode($_POST['imgBase64']);