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

【问题标题】：How to convert a div with img tags to an image如何将带有 img 标签的 div 转换为图像
【发布时间】：2016-05-06 07:47:34
【问题描述】：

我正在尝试将包含一些 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 标签，目标是在真实图像下显示画布。我知道这个库的跨域资源存在问题，但是当我使用我的真实代码进行测试时，图像托管在我的计算机上。

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

【问题讨论】：

标签： javascript jquery canvas html2canvas

【解决方案1】：

您的 JSFiddle 工作正常，但跨域问题除外。我一直在尝试找到一个快速破解它，但我能想到的最好的方法就是在你的onrendered事件中给你的画布上画，我还没有真正玩过定位和z-order 不可能以这种方式实现，但也许对您的 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);
    }
  });
}

【讨论】：

我的 jsFiddle 是按原样工作的，还是你改变了什么？我正在使用 chrome（无法下载 FF atm，我明天会检查一下），我只有一个空 div。我会试试你给我的功能，看看我是否可以“截屏”之前的 2 张图像（原件 + 其副本）。感谢您的帮助！
@PineApple34 它按原样工作，因为html2canvas 将屏幕截图减去图像，因为它位于不同的域中。您可以通过在要制作屏幕截图的 div 中添加文本或其他内容来验证这一点。我提供的代码只是获取图像并将其绘制到html2canvas 提供的新画布上，但它不会计算绘制它的位置。
好吧，我当时不明白，因为当图像托管在我的计算机上时它无法正常工作（当一切都在本地运行时会出现跨域错误吗？），我记得我设法“筛选”了我的菜单栏。无论如何，我现在放弃了这个，因为我找到了一个解决方法（将我的 div 的充满 img 标签的内容复制到另一个 div 然后缩放它）到我的缩略图问题。我想同时使用不同的语言开发几个项目，所以当我对另一个项目有一个令人兴奋的想法时，我会每隔一段时间暂停一个项目：p
@PineApple34 当一切都在本地时，肯定会出现跨域错误 - 如果您使用文件路径而不是托管在您没有使用域的服务器上，那么这绝对是一个跨域问题。我知道那种感觉 :) 享受吧！
我最终放弃了这个功能，因为我为我的程序找到了一些更好的功能 x) 谢谢你的帮助 :)