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

Question

我正在创建HTML var signoutButton = new Button () { VerticalOptions = LayoutOptions.EndAndExpand, HorizontalOptions = LayoutOptions.Center, TextColor = AppStyle.DarkLabelColor, }; signoutButton.SetBinding(Button.TextProperty, "SignOutButtonText"); signoutButton.SetBinding(Button.CommandProperty, "SignoutCommand"); 的图片。它的工作正常，图像使用html2canvas.js呈现给另一个div。

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

我正在使用的示例代码：

<div>

请建议。

Answer 1

这通常使用一些服务器端工具来实际存储图像...没有将生成的图片存储到服务器的文件系统，就没有办法（使用普通的URL）能够服务它。

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

为此，请获取图像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>