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

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 标签，目标是在真实图像下显示 canvas。我知道这个库的跨域资源有问题，但是当我用我的真实代码进行测试时，图像托管在我的计算机上。

有谁知道怎么做或者是否有其他方法（如果它也能绕过跨域问题就太好了）？

Answer 1

除了跨域问题，您的 JSFiddle 可以正常工作。我一直在努力寻找一个快速破解它的方法，但我能想到的最好的办法就是利用你在 onrendered 事件中得到的 canvas 而我还没有确实玩过定位，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 转换为图片

How to convert a div with img tags to an image

javascript

jquery

canvas

html2canvas