将 html2canvas 中的图像保存在文件夹中答案

【问题标题】：Save image from html2canvas inside a folder将 html2canvas 中的图像保存在文件夹中
【发布时间】：2016-01-20 08:05:27
【问题描述】：

我正在创建 HTML <div> 的图像。它工作正常，图像使用 html2canvas.js 呈现到另一个 div。

现在我想提供一个链接，以便任何人都可以将图像下载到应用程序内的文件夹中。

我正在使用的示例代码：

//html whose image will be created.
<div id="mydiv">
     <p>text!</p>
     <h1>This is a test!!</h1>
</div>

//div where image will be rendered.
<div id="image">
        <p>Image:</p>
</div>

//script to create image of html

<script type="text/javascript" src="/js/html2canvas.js"></script>
    <script type="text/javascript">
        html2canvas([document.getElementById('mydiv')], {
            onrendered: function (canvas) {

                var data = canvas.toDataURL('image/gif');
                var image = new Image();
                image.src = data;
                document.getElementById('image').appendChild(image);

            }
        });
    </script>

请建议。

【问题讨论】：

标签： javascript jquery html html5-canvas html2canvas

【解决方案1】：

这通常是使用一些服务器端工具将图像实际存储在某个地方来完成的......如果不将生成的图片存储到服务器的文件系统，它就无法（使用普通 URL）提供它.

由于您使用 SRC 属性来存储画布，您可以使用该字符串（通常很长且不可读）作为 URL，但它不会指向任何服务器或域。图片的SRC其实是图片的数据直接存储而不是存储在文件中。

为此，获取图像源并让链接指向它：

//html whose image will be created.
<div id="mydiv">
     <p>text!</p>
     <h1>This is a test!!</h1>
</div>

//div where image will be rendered.
<div id="image">
        <p>Image:</p>
</div>
<a href="#" id="image_link">Link to image</a>

//script to create image of html

<script type="text/javascript" src="/js/html2canvas.js"></script>
<script type="text/javascript">
    html2canvas([document.getElementById('mydiv')], {
        onrendered: function (canvas) {

            var data = canvas.toDataURL('image/gif');
            var image = new Image();
            image.src = data;
            document.getElementById('image').appendChild(image);
            document.getElementById('image_link').href = data; //Here

        }
    });
</script>

【讨论】：

谢谢兄弟。那个“服务器端工具”成功了。我将“数据”作为 ajax 中的数据传递，然后使用 c# 保存。
您可以做的两个选项中的最佳选择:)。