html2canvas沒有得到圖像全高

由於某些原因，我不明白，html2canvas沒有捕獲整個高度的div。html2canvas沒有得到圖像全高

html2canvas($container, { 
    height: $container.height(), 
    onrendered: function(canvas) { 

     var data = canvas.toDataURL('image/png');   
     var file = dataURLtoBlob(data); 

     var formObjects = new FormData(); 
     formObjects.append('file', file); 

     $.ajax({ 
      url: 'ajax_preview', 
      type: 'POST', 
      data: formObjects, 
      processData: false, 
      contentType: false, 
     }).done(function(response){ 
      console.log(response); 
      //window.open(response, '_blank'); 
     }); 
    } 
});

我也嘗試手動設置高度height: $container.height()但遺憾的是圖像不斷被截斷。我也試圖設置高度1124，但結果是一樣的。

很難看，但在下面的圖片中，您看到圖像的白色部分沒有任何邊框。我在該部分中的所有內容都未顯示。

enter image description here

什麼可能導致此行爲的任何想法？

來源

2014-09-29 Linesofcode

你叫負載高度還是準備好了？如果準備好了，你可能會在圖像加載之前取高度，在這種情況下，高度不會太高 – Pete 2014-09-29 11:51:47

@Pete，首先謝謝。我設法發現這個問題屬於我使用的CSS文件，因爲我在JSFiddle中測試了一個類似的代碼並且它工作了。然後我測試時沒有調用我的CSS文件，並且工作得很好......但是使用CSS文件它沒有「T。看到下面的圖片：http://s24.postimg.org/jl2fqdtv9/image.png http://s24.postimg.org/hhs0ipu2d/image.png - 第一個圖像有CSS文件，第二個沒有。 – Linesofcode 2014-09-29 13:26:20

解決。

我的代碼實際上是正確的，問題出在我使用的CSS文件上。爲了避免這種情況，我已經刪除並在將div轉換爲圖像時再次調用該文件。

// $= means that ends with 
("link[href$='my.css']").remove(); 

html2canvas($container, { 
    onrendered: function(canvas) { 

     var data = canvas.toDataURL('image/png');   
     var file = dataURLtoBlob(data); 

     // etc 

     $('head').append("<link href='" + base_url + "public/css/my.css' rel='stylesheet'/>"); 
    } 
});

來源

2014-09-29 14:10:53 Linesofcode

你能分享一些關於什麼css規則導致這個問題的更多細節嗎？ – user210757 2016-05-11 22:43:11

我不知道，這是在2014年：| – Linesofcode 2016-05-13 13:42:56

html2canvas沒有得到圖像全高

回答

相關問題