从文件夹中的html2canvas保存图像

Question

我正在创建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>

请提示。

Answer 1

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

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

为此，获取get image 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>