js保存指定div为图片，有好方法咩

如题，今天突然来了奇怪的需求，用户要求添加一个按钮，作用是将其中一个div作为图片输出（div里面是一个table），想了半天，没想出来，特来求助

解决方案 »

  1.   

    直接显示就行了啊，为啥一定要用图片呢？！用户所看到的是一般的html还是图片对他有啥区别呢？！
    需求开发人员应该也是可以改的吧。
      

  2.   

    楼主试试这个，可以将指定DIV转换为SVG图像。<!DOCTYPE html>
    <html><body>
    <h2>Input Div:</h2>
    <div id="div">
    <p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>TRY</span></p><p><b>By Dion</b></p>
    </div>
    <h2>Output Image:</h2>
    <script>
    var divContent = document.getElementById("div").innerHTML;
    var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
    "<foreignObject width='100%' height='100%'>" +
    "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
    divContent +
    "</div>" +
    "</foreignObject>" +
    "</svg>";
    var img = new Image();
    img.src = data;
    document.getElementsByTagName('body')[0].appendChild(img);
    </script>
    </body></html>