捕獲一個div並保存爲jpeg

Question

#cap是我想捕獲的div。 我用ctx.drawImage($('#cap').get(0),0,0,640,480);window.open(canvas.getDataURL('image/jpeg'));

得到了Type error 以及如何將其發送到PHP保存爲a.jpeg

UPDATE

http://jsfiddle.net/3qNJB/不工作的幫助html2canvas is not a function

Answer 1

而不是打開圖像使用JavaScript，只需將它發佈到您的服務器，以便PHP可以接收它，將其保存在服務器上，然後將其發送回瀏覽器。

我發現這個DivsToJPG()函數這裏：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) { 

}); 

然後在PHP

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

Answer 2

< DIV>元素不能使用的drawImage（） method.Have畫布繪製看看Html2Canvas庫

示例：

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

赫雷什Fiddle