Question

我正在尝试将包含一些img标签的div转换为png。经过一些搜索，看起来最好的方法是使用html2canvas库。

问题在于它不适合我，我不明白为什么。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
        <script src="lib/js/Blob.js"></script>
        <script src="lib/js/canvas-to-blob.min.js"></script>
        <script src="lib/js/FileSaver.js"></script>
        <script src="lib/js/html2canvas.js"></script>
        <script src="lib/js/jquery.min.js"></script>
        <script src="lib/js/underscore-min.js"></script>
        <title>Tests Only</title>
    </head>
    <body>
        <div id="navigationButtons">
        </div>

        <div id="sourceScreen" style="width:200px">
            <img id="lol" src="tier-icons/base_icons/bronze.png" />
        </div>

        <div id="targetScreen">
        </div>

        <script = "text/javascript">
        jQuery('#navigationButtons').append('<button type="button" id="makeScreenshot">Screenshot</button>');
        jQuery('#makeScreenshot').click(makeScreenshot);

        function makeScreenshot(){
          html2canvas(jQuery('#sourceScreen'), {
            onrendered: function(canvas) {
              jQuery('#targetScreen').html(canvas);
            }
          });
        }
        </script>
    </body>
</html>

这是我的代码的jsFiddle： https://jsfiddle.net/2vv79ehy/1/

我试图在这个例子中首先使用1 img标签，目标是在真实图像下显示画布。我知道这个库的跨域资源存在问题，但是当我使用我的真实代码进行测试时，图像将存储在我的计算机上。

有没有人知道如何做到这一点，或者是否有另一种方式（如果它可以绕过跨域问题会很棒）？

Answer 1

除了跨域问题，您的JSFiddle才有效。我一直试图找到一个快速的黑客围绕它，但我能想到的最好的只是画在你onrendered事件中给你的画布上我并没有真正玩定位并且z顺序不可能以这种方式实现，但是这个对makeScreenshot函数的编辑可以帮助您找到适合您的解决方案：

function makeScreenshot(){
  html2canvas(jQuery('#sourceScreen'), {
    onrendered: function(canvas) {
      var img = jQuery("#cat");
      var ctx = canvas.getContext("2d");
      var originalPosition = { left: 0, top: 18 };
      ctx.drawImage(img[0],originalPosition.left,originalPosition.top);
      jQuery('#targetScreen').html(canvas);
    }
  });
}

如何将带有img标签的div转换为图像

1 个答案: