不能使用asp.net中的html2canvas将div元素更改为canvas

时间:2014-02-27 12:23:51

标签: javascript jquery asp.net html2canvas

我使用html2canvas这就是我在母版页中声明js文件和css的方法

     <head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/html2canvas.js" type="text/javascript"></script>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

在我的内容页面中,

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
    html2canvas(document.getElementById("mainDiv"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        }
    });
</script>    
<div id="mainDiv" style="background-color: #CCFF66; border-style: solid; border-color: #000000;
    width: 300px; height: 300px;display:block">
</div>    

但它不适用于此代码document.getElementById("mainDiv"),但当我更改为document.body

 html2canvas(document.body, { 
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        }

它起作用,它将图像附加到身体的底部 但我不想转换我的整个页面。
我只是想将DIV转换为画布 我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

老兄,你错过了asp页面中的$(document).ready ( function () { ... })语句,因此没有初始化

  $(document).ready ( function () { 
      html2canvas(document.getElementById("mainDiv"), {
           onrendered: function (canvas) {
              document.body.appendChild(canvas);
           }
       });
   });

快乐编码:)