将图像对象从我的网页保存到文件

Question

我正在使用带有 ASP 的 VB。我有一个 ASP Image 控件，其中包含一个图像，在这种情况下，它是从 Google Maps 引入的静态地图。我想使用 VB 代码将该图像下载到图像（bmp、jpg 或任何东西）。图像驻留在客户端的 asp:Image 对象中。只需要使用来自服务器端的代码下载图像。如有必要，我可以在客户端使用 JS 来执行此操作。在这种情况下，我仍然想看看是否有人知道如何做到这一点。

这是我的 javascript 代码，用于将页面上显示的地图加载到 asp:image 对象。这部分效果很好。只需要将图像保存为文件。此函数正在使用的页面上的先前代码中有预定义的变量，包括“地图”、“地图选项”、“边界”和“标记”

function Export() {
    map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

    //URL of Google Static Maps.
    var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap";

    //Set the Google Map Center.
    staticMapUrl += "?center=" + mapOptions.center.G + "," + mapOptions.center.K;

    //Set the Google Map Size.
    staticMapUrl += "&size=220x350";

    //Set the Google Map Zoom.
    staticMapUrl += "&zoom=" + mapOptions.zoom;

    //Set the Google Map Type.
    staticMapUrl += "&maptype=" + mapOptions.mapTypeId;

    //Loop and add Markers.
    for (var i = 0; i < markers.length; i++) {
        var data = markers[i];

        if (data.pointNumber !== null) {
            var labelNumber = data.pointNumber;
            var labelString = labelNumber.toString();
            var iconName = 'm' + labelString + '.png';
            var roundLat = data.latitude; // + .00003;
            var roundLon = data.longitude; // + .000005;

            var myLatlng = new google.maps.LatLng(roundLat, roundLon);

            var image =
            {
                url: 'ImagesForPoints/' + iconName,
                scaledSize: new google.maps.Size(35, 48), // scaled size
                //size: new google.maps.Size(53, 73),
                //origin: new google.maps.Point(0,0), 
                //anchor: new google.maps.Point(30, 69)
                anchor: new google.maps.Point(19, 45)
            };


            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: image,

            });

            bounds.extend(marker.position);
            map.fitBounds(bounds);

        }
    }

    //Display the Image of Google Map.
    var imgMap = document.getElementById("imgMap");
    imgMap.src = staticMapUrl;
    imgMap.style.display = "block";
}

Answer 1

由于您使用从 URL 生成图像的 Google Maps Static API，因此您的服务器端 VB ASP.NET 代码只需要用于生成图像的 URL，就可以下载它。

例如，来自 Google Maps Static API 的以下 URL 将提供以纽约布鲁克林大桥为中心的图像：

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284

因此，您的服务器端代码将需要此 URL 才能下载完全相同的图像。您可以通过以下可能的方式将此 URL 获取到您的服务器应用程序：

1. 将 URL 作为 HTML 表单提交（回发）发回。
2. 编写一个接受下载 URL 的 Web 服务。

由于您似乎在使用 ASP.NET Web 表单，因此第一个选项将是您目前最简单的选择。您需要做的就是向您的页面添加一个 asp:HiddenField 控件

<asp:HiddenField ID="MapURL" runat="server" ClientIDMode="static" />

然后在你的 JavaScript 导出函数中设置字段的值：

var mapUrlField = document.getElementById('<%= MapURL.ClientID %>');
if (mapUrlField)
{
    mapUrlField.value = staticMapUrl;
}

然后在回发服务器端，您可以从隐藏字段中检索 URL，然后使用 WebClient 下载图像。

Dim SaveFilePath as String = "c:\folder\mymap.png"
Dim Client as new WebClient
Client.DownloadFile(MapURL.Value, SaveFilePath )
Client.Dispose