Question

我只有一个按钮和一个图像在＆＃34;右侧容器＆＃34; DIV。当我点击按钮时，它应该截取到div。它确实如此，但图像并不只显示单词。我读到了这一点，我认为因为图像不在div DOM中。如何使图像成为div的一部分，以便它也出现在屏幕截图中。

＆＃13;

$(".drag").draggable();
$(".drag").droppable();
var takeScreenShot = function() {
  html2canvas(document.getElementById("container"), {
    onrendered: function(canvas) {
      var tempcanvas = document.createElement('canvas');
      tempcanvas.width = 350;
      tempcanvas.height = 350;
      var context = tempcanvas.getContext('2d');
      context.drawImage(canvas, 112, 0, 288, 200, 0, 0, 350, 350);
      var link = document.createElement("a");
      link.href = tempcanvas.toDataURL('image/jpg'); //function blocks CORS
      link.download = 'screenshot.jpg';
      link.click();
    }
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<button onclick="takeScreenShot()">Snapshot</button>
<div id="container">
    <div id="leftmenu">
      Left Side
      <div class="drag">
      </div>
      <div class="drag">
      </div>
      <div class="drag">
      </div>
      Drag----------->
            &
      Click Snapppppppppppppp </br>
        
    </div>
    <div id="rightcontainer">
        Right Side
        <img id = "conn" src="https://static.pexels.com/photos/39803/pexels-photo-39803.jpeg" width="500px" ;>

    </div>


</div>

＆＃13;

Answer 1

这里的问题是图像来自外部网站。 html2canvas将只处理来自与HTML文件相同来源的图像，即同一个Web域。

此问题的一个潜在解决方法是使用某种代理，但最好的解决方案可能只是下载图像并与您的网站一起提供。

您可以在html2canvas documentation website上阅读更多内容（此问题列在＆＃34;限制＆＃34;部分下），如果您有兴趣使用代理来解决此问题，讨论了here。

其次，您使用旧版本的html2canvas。下载latest version，然后将此takeScreenShot函数替换为此版本（因为新API使用promises而不是回调）：

var takeScreenShot = function() { 
    html2canvas(document.getElementById("container")).then(canvas=>{
        var link = document.createElement("a");
        link.href = canvas.toDataURL('image/jpg');
        link.download = 'screenshot.jpg';
        link.click();
    })
}

这将创建正确的输出（您可以在document.body.appendChild(canvas)行之前执行var link测试），但您无法下载它，因为画布将是＆＃ 34;污点＆＃34 ;.要解决此问题，您必须在某种本地服务器上运行该网站（如果您还没有），例如XAMPP。

为什么图像不是div的一部分？如何将其添加到DOM？

1 个答案: