将div保存到图像(不工作)

时间:2015-10-05 18:33:06

标签: jquery html image canvas

我从小提琴(http://jsfiddle.net/8ypxW/3/)获得了一个代码,用于将div转换为图像。' 但是当我试图在我的页面中实现它不工作.. 以下是我的代码......

Plz帮我朋友.......

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$(function () {
    $("#btnSave").click(function () {
       html2canvas($("#widget"), {
            onrendered: function (canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas);
                $("#img-out").append(canvas);
            }
        });
    });
});
</script>
</head>
<body>
<span id="widget" class="widget">  
    this is text.
</span>
<br/>
<button id="btnSave">Save PNG</button>

<div id="img-out"></div>


</body>

</html>

2 个答案:

答案 0 :(得分:1)

您只包含jquery核心。您需要项目中包含的其他js文件。

  <script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>

  <script type='text/javascript' src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script>

  <script type='text/javascript' src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>

答案 1 :(得分:0)

您是否正确引用了库?在您的代码中,您只加载jquery文件。