将 div 保存到图像（不工作）答案

【问题标题】：save div to image (not working)将 div 保存到图像（不工作）
【发布时间】：2015-10-06 02:37:46
【问题描述】：

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

朋友们请帮帮我......

<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>

【问题讨论】：

标签： jquery html image canvas

【解决方案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>

【讨论】：

现在感谢它的工作......但在小提琴中......它们包含任何文件......所以我认为它可以在不添加额外文件的情况下工作
小提琴确实包括了它们。在左侧查找“外部资源”，这将列出任何带有 css 文件或 js 文件的外部资源。

【解决方案2】：

您是否正确引用了这些库？在您的代码中，您只加载 jquery 文件。

【讨论】：