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 个答案: