Implement high-res download blocks PNG (#2152)

appinventor/blocklyeditor/src/exportBlocksImage.js

@@ -304,6 +304,7 @@ function PNG() {
  * @const
  */
 PNG.HEADER = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A];
+var pHY_data =  [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
 /**
  * Chunk represents the four components of a PNG file chunk.
@@ -461,13 +462,23 @@ Blockly.exportBlockAsPng = function(block) {
     img.src = uri;
     img.onload = function() {
       var canvas = document.createElement('canvas');
-      canvas.width = img.width;
-      canvas.height = img.height;
+      canvas.width = 2 * img.width;
+      canvas.height = 2 * img.height;
       var context = canvas.getContext('2d');
-      context.drawImage(img, 0, 0);
+      context.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
 
       function download(png) {
         png.setCodeChunk(code);
+        for (var i = 0; i < png.chunks.length; i++) {
+          var phy = [112, 72, 89, 115];
+          if (png.chunks[i].type == 'pHYs') {
+            png.chunks.splice(i, 1, new PNG.Chunk(9, 'pHYs', pHY_data, crc32(phy.concat(pHY_data)))); //replacing existing pHYs chunk
+            break;
+          } else if (png.chunks[i].type == 'IDAT') {
+            png.chunks.splice(i, 0, new PNG.Chunk(9, 'pHYs', pHY_data, crc32(phy.concat(pHY_data)))); // adding new pHYs chunk
+            break;
+          }
+        }
         var blob = png.toBlob();
         var a = document.createElement('a');
         a.download = (block.getChildren().length === 0 ? block.type : 'blocks') + '.png';