從文件夾中的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>