admin管理员组

文章数量:1327945

#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

Share Improve this question edited Jun 12, 2014 at 10:59 user3508453 asked Jun 11, 2014 at 18:11 user3508453user3508453 8883 gold badges14 silver badges24 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

< 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']);

本文标签: javascriptCapture a div and save as jpegStack Overflow