使用Javascript和html2canvas.js的Div屏幕截圖部分起作用

Question

我正在嘗試捕獲div元素內的圖像的屏幕截圖，只要div元素內的靜態圖像符合以下代碼，一切都可以正常工作。 它顯示正確的base64圖像轉換

   <div class="container_im" id="container_im">
<img src="screenshot.jpg">
    </div><br>

這是我的問題。 現在，我正在嘗試從文件輸入中上傳圖像並將其顯示在div元素內的預覽中，然后將上傳的圖像捕獲為屏幕截圖。 圖像顯示在預覽中，但是當我嘗試將其捕獲為屏幕截圖時，它沒有顯示正確的base64圖像轉換。

是問題所在，因為頁面加載時未首先加載上載的圖像

這是下面的代碼

 <div class="container_im" id="container_im">
   <img id="output"/>
        </div><br>

    <input type="file" accept="image/*" onchange="loadFile(event)">
    <script>
      var loadFile = function(event) {
        var output = document.getElementById('output');
        output.src = URL.createObjectURL(event.target.files[0]);
      };
    </script>

這是完整的代碼

    <html><head>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>


     <script type="text/javascript" src="http://localhost/angle/online/offline2Copy/file/html2canvas.js"></script>

        </head>
     <body>


            <div class="container_im" id="container_im">

        <img src="screenshot.jpg">

            </div><br>

or

<div class="container_im" id="container_im">
   <img id="output"/>
        </div><br>

      <input type="button" id="but_screenshot" value="Take screenshot" class="testbn"><br>

    <p id="demo_pic"></p>




            <script type="text/javascript">
    $(document).ready(function() {    
    $(".testbn").click(function() {

                    html2canvas(document.getElementById("container_im")).then(function(canvas) {

                        var tt= document.body.appendChild(canvas);
    var dataURL = canvas.toDataURL();
    alert(dataURL);

    document.getElementById("demo_pic").innerHTML = dataURL;


                    });
    });
    });
            </script>

    <input type="file" accept="image/*" onchange="loadFile(event)">
    <script>
      var loadFile = function(event) {
        var output = document.getElementById('output');
        output.src = URL.createObjectURL(event.target.files[0]);
      };
    </script>


    </body></html>

Answer 1

canvas.toDataURL()的輸出必須設置為圖像的src屬性。
您不能僅將其添加到<p> 。
如果將<p id="demo_pic"></p>更改為圖像，例如<img id="demo_pic"></img> ，然后設置document.getElementById("demo_pic").src = dataURL 。

這是一個工作的小提琴。
http://jsfiddle.net/2pha/32o6es8a/

使用Javascript和html2canvas.js的Div屏幕截圖部分起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2018-08-14 23:29:28

使用Javascript和html2canvas.js的Div屏幕截圖部分起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2018-08-14 23:29:28

解決方案1
1 已采納 2018-08-14 23:29:28