WebページからImageオブジェクトをファイルに保存

Question

私はASPでVBを使用しています。私は、この場合、Googleマップから持ち込まれた静的なマップであるイメージを含むASP Imageコントロールを持っています。私はVBのコードを使用してイメージ（bmp、jpg、または何か）にそのイメージをダウンロードしたいと思います。イメージはクライアント側のasp：Imageオブジェクトにあります。サーバー側からコードを使用してイメージをダウンロードするだけです。必要に応じて、JSをクライアント側で使用してこれを行うことができます。その場合、私はまだ誰かがこれを行う方法を知っているかどうかを見たいと思います。

ここにページに表示されたマップをasp：imageオブジェクトにロードするためのJavaScriptコードです。この部分は素晴らしい作品です。イメージをファイルとして保存するだけです。この機能は、生成し、あなたの使用してGoogleマップの静的API、以来、「マップ」「マップ・オプション」、「境界」と「マーカー」

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からイメージを取得するには、サーバー側のVB ASP.NETコードでは、イメージを生成するために使用されたURLのみが必要です。たとえば、Google Mapsの静的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.
&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