Div Javascript 和 html2canvas.js 部分工作的屏幕截图

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，它应该可以工作。

这是一个有效的 fiddle。
http://jsfiddle.net/2pha/32o6es8a/

Div Javascript 和 html2canvas.js 部分工作的屏幕截图

Div Screenshot with Javascript and html2canvas.js partially working

javascript

jquery

html2canvas