使用 html2canvas 將 div 捕獲到圖像中

Question

我正在嘗試使用html2canvas將 div 捕獲到圖像中

我在這里讀過一些類似的問題

使用 html2canvas 創建 web 頁面的屏幕截圖（無法正確初始化）

我試過代碼

canvasRecord = $('#div').html2canvas(); 
dataURL = canvasRecord.toDataURL("image/png");

調用.html2canvas()后canvasRecord將是undefined的

還有這個

$('#div').html2canvas({
      onrendered: function (canvas) {
           var img = canvas.toDataURL()
           window.open(img);
      } 
});

瀏覽器給出了一些（准確地說是 48 個）類似的錯誤，例如：

GET http://html2canvas.appspot.com/?url=https%3A%2F%2Fmts1.googleapis.com%2Fvt%…%26z%3D12%26s%3DGalileo%26style%3Dapi%257Csmartmaps&callback=html2canvas_1 404 (Not Found)

順便說一句，我使用的是 v0.34，我添加了參考文件html2canvas.min.js和jquery.plugin.html2canvas.js

如何將div轉換為canvas以捕獲圖像。

2013 年 3 月 26 日編輯

我找到了Joel 的示例作品。

但不幸的是，當谷歌 map 嵌入我的應用程序時，會出現錯誤。

<html>
<head>
<style type="text/css">
div#testdiv
{
    height:200px;
    width:200px;
    background:#222;
}
div#map_canvas
{
    height: 500px;
    width: 800px;
    position: absolute !important;
    left: 500px;
    top: 0;
}
</style>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script language="javascript">
$(window).load(function(){
     var mapOptions = {
        backgroundColor: '#fff',
        center: new google.maps.LatLng(1.355, 103.815),
        overviewMapControl: true,
        overviewMapControlOptions: { opened: false },
        mapTypeControl: true,
        mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        panControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        streetViewControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        minZoom: 1,
        zoom: 12
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    $('#load').click(function(){

            html2canvas($('#testdiv'), {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png")
                    window.open(img);
                }
            });

    });
});
</script>
</head>
<body>
<div id="testdiv">
</div>
<div id="map_canvas"></div>
<input type="button" value="Save" id="load"/>
</body>
</html>

Answer 1

我遇到了你描述的相同類型的錯誤，但我的錯誤是由於 dom 沒有完全准備好。 我用 jQuery 拉取 div 和 getElementById 進行了測試，只是為了確保 jQuery 選擇器沒有什么奇怪的東西。 下面是一個適用於 Chrome 的示例：

<html>
<head>
<style type="text/css">
div {
    height: 50px;
    width: 50px;
    background-color: #2C7CC3;
}
</style>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
    html2canvas($("#testdiv"), {
        onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var myImage = canvas.toDataURL("image/png");
            window.open(myImage);
        }
    });
});
</script>
</head>
<body>
<div id="testdiv">
</div>
</body>
</html>

Answer 2

如果你只是想有一個 div 的截圖，你可以這樣做

html2canvas($('#div'), {
  onrendered: function(canvas) {
    var img = canvas.toDataURL()
    window.open(img);
  }
});

Answer 3

您可以嘗試使用此代碼捕獲 div 當 div 非常寬或相對於屏幕偏移時

var div = $("#div")[0];
var rect = div.getBoundingClientRect();

var canvas = document.createElement("canvas");
canvas.width = rect.width;
canvas.height = rect.height;

var ctx = canvas.getContext("2d");
ctx.translate(-rect.left,-rect.top);

html2canvas(div, {
    canvas:canvas,
    height:rect.height,
    width:rect.width,
    onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png");
        var pHtml = "<img src="+image+" />";
        $("#parent").append(pHtml);
    }
});

Answer 4

10 2022

這個問題已經很老了，但是如果有人正在尋找一個明確的解決方案來實施，那么就在這里。 這是使用帶有html2canvas和FileSaver的純 JS

我已經測試過，效果很好。

捕獲 div 中的所有內容。

第1步

在頁腳中包含腳本。 jQuery不需要，這兩個都可以。 如果您的文件中已有這兩個文件，請注意正確的版本。 我知道這是一件小事，但它很重要。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>

第2步

基本分區 style屬性是可選的。 我在這里使用它是為了讓它看起來像樣。

<div id="savethegirl" style="background-color:coral;color:white;padding:10px;width:200px;">
    I am a Pretty girl 👩
</div>

<button onclick="myfunc()">Save the girl</button>

它應該看起來像這樣

步驟 3

包括這個腳本

function myfunc(){
    // if you are using a different 'id' in the div, make sure you replace it here.
    var element = document.getElementById("savethegirl");
    html2canvas(element).then(function(canvas) {
        canvas.toBlob(function(blob) {
            window.saveAs(blob, "Heres the Girl.png");
        });
    });
};

第四步

單擊按鈕，它應該保存文件。

資源

CDN 來自： https://cdnjs.com/這是來自 Carlos Delgado 的文章（ https://ourcodeworld.com/articles/read/415/how-to-create-a-screenshot-of-your-website-with- javascript-using-html2canvas ）。 我簡化了

如果這個答案有用。
點擊那個向上箭頭它會幫助其他人找到它。

Answer 5

不知道會不會遲到，但是我用過這個表格。

JS：

function getPDF()  {
       html2canvas(document.getElementById("toPDF"),{
        onrendered:function(canvas){
 
        var img=canvas.toDataURL("image/png");
        var doc = new jsPDF('l', 'cm'); 
        doc.addImage(img,'PNG',2,2); 
        doc.save('reporte.pdf'); 
       }
    }); 
}

HTML：

<div id="toPDF"> 
    #your content...
</div>

<button  id="getPDF" type="button" class="btn btn-info" onclick="getPDF()">
    Download PDF
</button>

Answer 6

使用 html2canvas 可以輕松完成，請嘗試以下操作，

嘗試在 html 模式中添加 div 並使用 jquery 函數調用模型 ID。 在該函數中，您可以指定要顯示的圖像的大小（高度、寬度）。 使用 modal 是一種在按鈕 onclick 中將 html div 捕獲到圖像中的簡單方法。

例如看看代碼示例，

`

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">


            <div class="modal-body">
                <p>Some text in the modal.</p>

`

將要顯示的 div 粘貼到模型中。 希望它會有所幫助。

Answer 7

window.open對我不起作用......只是渲染了一個空白頁面......但我能夠通過替換作為目標創建的預先存在的img元素的src屬性使 png 出現在頁面上。

 $("#btn_screenshot").click(function(){ element_to_png("container", "testhtmltocanvasimg"); }); function element_to_png(srcElementID, targetIMGid){ console.log("element_to_png called for element id " + srcElementID); html2canvas($("#"+srcElementID)[0]).then( function (canvas) { var myImage = canvas.toDataURL("image/png"); $("#"+targetIMGid).attr("src", myImage); console.log("html2canvas completed. png rendered to " + targetIMGid); }); }

 <div id="testhtmltocanvasdiv" class="mt-3"> <img src="" id="testhtmltocanvasimg"> </div>

然后我可以右鍵單擊渲染的 png 並“另存為”。 使用“截圖工具”來捕獲元素可能同樣容易，但是 html2canvas 肯定是一段有趣的代碼！

Answer 8

您可以使用以下代碼段獲取分區的屏幕截圖並輕松保存。 這里我使用了整個 body，你可以通過輸入 id/class 名稱來選擇特定的圖像/div 元素。

 html2canvas(document.getElementsByClassName("image-div")[0], {
  useCORS: true,
}).then(function (canvas) {
  var imageURL = canvas.toDataURL("image/png");
  let a = document.createElement("a");
  a.href = imageURL;
  a.download = imageURL;
  a.click();
});

Answer 9

你應該試試這個（測試，至少在 Firefox 中有效）：

html2canvas(document.body,{
   onrendered:function(canvas){
      document.body.appendChild(canvas);
   }
});

我運行這些代碼行以獲得完整的瀏覽器屏幕（只有可見屏幕，而不是孔站點）：

var w=window, d=document, e=d.documentElement, g=d.getElementsByTagName('body')[0];
var y=w.innerHeight||e.clientHeight||g.clientHeight;

html2canvas(document.body,{
   height:y,
   onrendered:function(canvas){
      var img = canvas.toDataURL();
   }
});

更多解釋和選項在這里： http : //html2canvas.hertzen.com/#/documentation.html

使用 html2canvas 將 div 捕獲到圖像中

問題描述

9 個解決方案

解決方案1
24 2013-02-07 23:39:10

解決方案2
22 2013-02-06 07:40:32

解決方案3
11 2017-05-15 08:32:14

解決方案4
3 2022-10-07 20:35:16

10 2022

捕獲 div 中的所有內容。

第1步

第2步

步驟 3

第四步

資源

解決方案5
2 2020-11-03 09:11:29

解決方案6
1 2019-04-04 06:45:50

解決方案7
1 2019-05-22 17:47:25

解決方案8
1 2020-11-09 07:50:10

解決方案9
-2 2013-02-07 22:22:19

使用 html2canvas 將 div 捕獲到圖像中

問題描述

9 個解決方案

解決方案1 24 2013-02-07 23:39:10

解決方案2 22 2013-02-06 07:40:32

解決方案3 11 2017-05-15 08:32:14

解決方案4 3 2022-10-07 20:35:16

10 2022

捕獲 div 中的所有內容。

第1步

第2步

步驟 3

第四步

資源

解決方案5 2 2020-11-03 09:11:29

解決方案6 1 2019-04-04 06:45:50

解決方案7 1 2019-05-22 17:47:25

解決方案8 1 2020-11-09 07:50:10

解決方案9 -2 2013-02-07 22:22:19

解決方案1
24 2013-02-07 23:39:10

解決方案2
22 2013-02-06 07:40:32

解決方案3
11 2017-05-15 08:32:14

解決方案4
3 2022-10-07 20:35:16

解決方案5
2 2020-11-03 09:11:29

解決方案6
1 2019-04-04 06:45:50

解決方案7
1 2019-05-22 17:47:25

解決方案8
1 2020-11-09 07:50:10

解決方案9
-2 2013-02-07 22:22:19