World Map Screenshot

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

 
        
         
          Here is some javascript to create a base64 encoded image of the World Map, courtesy of Illyriad Developer blog with a bit of modification for canvas id (2nd page also has code to post to server). Thanks again Illyriad dev team.
         
         
          http://www.illyriad.co.uk/blog/index.php/2011/09/fix-memory-leaks-animating-html5-canvas/
         
        
        
         http://www.illyriad.co.uk/blog/index.php/2011/09/html5-canvas-creating-screenshots-from-javascript/ 
        
        
         

        
        
         You can paste the code below into the console (Chrome:CTRL+Shift+J), press enter, then entering  '
         TakeScreenshot()' into the console will return the World Map as an image. You can then click the link looking text and it will open the image in a new tab, where you can right-click and "Save Image as".
        
        
         

        
        
         Enjoy!
        
        
         

        
        
         
          var CachedCanvases = new Object(); // Canvas element cache
         
         
           
         
         
          function CreateCanvasCached(name) {
         
         
              if (!CachedCanvases[name]) {
         
         
                  var canvas = document.createElement('canvas');
         
         
                  CachedCanvases[name] = canvas;
         
         
                  return canvas;
         
         
              }
         
         
              return CachedCanvases[name];
         
         
          };
         
         
          

         
         
          function TakeScreenshot() {
         
         
              StopAnimating(); // Stop the animation loop
         
         
           
         
         
              var bufferScreenshot = CreateCanvasCached("Screenshot");
         
         
              bufferScreenshot.height = 500; bufferScreenshot.width = 500;
         
         
              var contextScreenshot = bufferScreenshot.getContext("2d");
         
         
              // Draw the layers in order
         
         
              contextScreenshot.drawImage(document.getElementById("mapTerrain"), 0, 0, 500, 500);
         
         
              contextScreenshot.drawImage(document.getElementById("mapSov"), 0, 0, 500, 500);
         
         
              contextScreenshot.drawImage(document.getElementById("mapCities"), 0, 0, 500, 500);
         
         
              contextScreenshot.drawImage(document.getElementById("mapAnims"), 0, 0, 500, 500);
         
         
           
         
         
              // Save to a data URL as a jpeg quality 9
         
         
              var imgUrl = bufferScreenshot.toDataURL("image/jpeg", .9);
         
         
           
         
         
              StartAnimating(); // Restart the animation loop
         
         
              return imgUrl;
         
         
          }
         
        
        
         
        

Edited by ubluntu - 28 Sep 2013 at 05:50

Author	Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic
ubluntu Members Profile Send Private Message Find Members Posts Add to Buddy List Forum Warrior Joined: 24 Aug 2013 Status: Offline Points: 324	Topic: World Map Screenshot Posted: 28 Sep 2013 at 05:38
	Here is some javascript to create a base64 encoded image of the World Map, courtesy of Illyriad Developer blog with a bit of modification for canvas id (2nd page also has code to post to server). Thanks again Illyriad dev team. http://www.illyriad.co.uk/blog/index.php/2011/09/fix-memory-leaks-animating-html5-canvas/ http://www.illyriad.co.uk/blog/index.php/2011/09/html5-canvas-creating-screenshots-from-javascript/ You can paste the code below into the console (Chrome:CTRL+Shift+J), press enter, then entering ' TakeScreenshot()' into the console will return the World Map as an image. You can then click the link looking text and it will open the image in a new tab, where you can right-click and "Save Image as". Enjoy! var CachedCanvases = new Object(); // Canvas element cache function CreateCanvasCached(name) { if (!CachedCanvases[name]) { var canvas = document.createElement('canvas'); CachedCanvases[name] = canvas; return canvas; } return CachedCanvases[name]; }; function TakeScreenshot() { StopAnimating(); // Stop the animation loop var bufferScreenshot = CreateCanvasCached("Screenshot"); bufferScreenshot.height = 500; bufferScreenshot.width = 500; var contextScreenshot = bufferScreenshot.getContext("2d"); // Draw the layers in order contextScreenshot.drawImage(document.getElementById("mapTerrain"), 0, 0, 500, 500); contextScreenshot.drawImage(document.getElementById("mapSov"), 0, 0, 500, 500); contextScreenshot.drawImage(document.getElementById("mapCities"), 0, 0, 500, 500); contextScreenshot.drawImage(document.getElementById("mapAnims"), 0, 0, 500, 500); // Save to a data URL as a jpeg quality 9 var imgUrl = bufferScreenshot.toDataURL("image/jpeg", .9); StartAnimating(); // Restart the animation loop return imgUrl; } Edited by ubluntu - 28 Sep 2013 at 05:50

ubluntu Members Profile Send Private Message Find Members Posts Add to Buddy List Forum Warrior Joined: 24 Aug 2013 Status: Offline Points: 324	Posted: 10 Oct 2013 at 00:48
	It is worth noting that if you just want a single screenshot, the built-in "Share" feature is the way to go(these are public accessible via direct url) The above code is intended to capture images without creating actions( Rules regarding third party tools http://forum.illyriad.co.uk/rules-regarding-third-party-tools_topic756.html). Which brings up Ex BBcode: