在JavaScript中以编程方式生成图像数据-uri

Question

我正在使用Google Maps进行地图项目。 我们有不同地理边界显示的各种不同类型的数据。 一些数据来自客户端，并且在隐私方面受到严格限制，因此无法发送到服务器端进行处理。 我们项目的目标之一是将不同的数据集插值到一个常规的常规大小的网格中，以进行比较和分析。 我希望能够在地图上可视化网格。 网格矩阵约为120x150，因此具有单个标量值的总共约18000个像元。 无法使用本机Google Maps绘图渲染的多边形太多。 由于它是规则大小的网格，因此似乎不错的解决方案是将网格渲染为图像，然后将其作为单个实体覆盖在地图上。 由于无法将数据发送到服务器进行处理，因此我试图尝试一种完全使用javascript做到这一点的方法。 我知道data-uri可以在CSS中使用，我也相信javascript，可以将小图像存储为字符串。 我不确定Google Maps是否会本机接受，但这将是一个单独的问题。 现在，我只是好奇是否有人使用data-uri模型实现了javascript图像生成器。 如果是这样，怎么做。 我已搜索但未找到任何尝试。 我已经看过文件规范，但想在深入研究大鹅追逐/重新发明轮子之前先问一下这里。 我知道我可以使用canvas元素以某种方式实现此目的，这种方式在代码可读性方面更有意义，但是似乎直接生成一个字符串似乎是一个不错的解决方案。

Answer 1

多亏了我的stackexchange问​​题上出现的侧边栏中的一些动词，我再次尝试使用一些不同的术语进行谷歌搜索，结果发现：

http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/

哪个或多或少回答了我的问题。 仍然对其他人感兴趣的有建议或答案！

更新：

这是我最终使用的代码。 它是从上面的链接进行修改的，因此网格的循环是从上到下，从左到右完成的，因此不需要翻转，并且我已经切除了一些辅助功能。 在循环中，我将数据调整为以平均值为中心，并标准化为跨越4个标准差（两个正值，两个负值）。

var interpolation = this.interpolateGeoDataLayerToGrid();

var numFileBytes = this.getLittleEndianHex(interpolation.grid[0].length * interpolation.grid.length);
var w = this.getLittleEndianHex(interpolation.grid[0].length);
var h = this.getLittleEndianHex(interpolation.grid.length);

var header =
    'BM' +                    // Signature
    numFileBytes +            // size of the file (bytes)*
    '\x00\x00' +              // reserved
    '\x00\x00' +              // reserved
    '\x36\x00\x00\x00' +      // offset of where BMP data lives (54 bytes)
    '\x28\x00\x00\x00' +      // number of remaining bytes in header from here (40 bytes)
    w +                       // the width of the bitmap in pixels*
    h +                       // the height of the bitmap in pixels*
    '\x01\x00' +              // the number of color planes (1)
    '\x20\x00' +              // 32 bits / pixel
    '\x00\x00\x00\x00' +      // No compression (0)
    '\x00\x00\x00\x00' +      // size of the BMP data (bytes)*
    '\x13\x0B\x00\x00' +      // 2835 pixels/meter - horizontal resolution
    '\x13\x0B\x00\x00' +      // 2835 pixels/meter - the vertical resolution
    '\x00\x00\x00\x00' +      // Number of colors in the palette (keep 0 for 32-bit)
    '\x00\x00\x00\x00';       // 0 important colors (means all colors are important)

var imgdata = "";

for (var row=interpolation.grid.length-1; row >= 0; row--) {
    for (var col=0; col<interpolation.grid[row].length; col++) {
        var value = Math.min(255,Math.max(0,Math.floor(128 + 64*(interpolation.grid[row][col]-interpolation.mean)/interpolation.stdev)));
        imgdata += String.fromCharCode(255-value, 0, value, 128);
    }
}

var datauri = 'data:image/bmp;base64,';
if(window.btoa != undefined) {
  datauri += btoa(header + imgdata);
}
else {
  datauri += $.base64.encode(header + imgdata);
}

newOverlay = new google.maps.GroundOverlay(datauri,
      new google.maps.LatLngBounds(
          new google.maps.LatLng(this.GridDataSettings.latmin, this.GridDataSettings.longmin),
          new google.maps.LatLng(this.GridDataSettings.latmax, this.GridDataSettings.longmax)
));

newOverlay.setMap(map);

这是lttleEndianHex帮助器函数，如上面的链接所示：

getLittleEndianHex: function(value) {
  var result = [];   
  for (var bytes = 4; bytes > 0; bytes--) {
    result.push(String.fromCharCode(value & 255));
    value >>= 8;
  }
  return result.join('');
}