javascript - 有没有办法以编程方式将 DIV 中的内容导出到图像？-6ren

javascript - 有没有办法以编程方式将 DIV 中的内容导出到图像？

转载作者：行者123 更新时间：2023-12-02 19:56:19

Possible Duplicate:
Take a screenshot of a webpage with javascript?

我希望以编程方式将 DIV 中的内容导出到图像？我能怎么做？哪个代码可以做到这一点，服务器代码还是客户端代码？谢谢!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
     <div id="a">
       Content to export to image
     </div>

     <div id="b">
       Normal text
     </div>
</body>
</html>

最佳答案

您可以使用 SVG 来做到这一点.

示例:

<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
  <foreignobject x="120" y="120" width="180" height="180">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        Something
      </div>
    </body>
  </foreignobject>
</svg>

或者在你拥有的之后:

<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
           "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               document.getElementById('a').innerHTML +
             "</foreignObject>" +
           "</svg>";
var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }

希望这对您有帮助。取自Mozilla Docs

关于javascript - 有没有办法以编程方式将 DIV 中的内容导出到图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8569842/