覆盖2x图像斑点

Question

我创建了一个将Mapbox GL JS画布转换为png图像blob的函数。

map.getCanvas().toBlob(function (blob) {
    mapBlob=blob;
    saveAs(blob, 'map.png');
})

不幸的是，这不包括DOM元素，其中之一是比例尺。我可以使用dom-to-image创建一个单独的比例尺斑点。

如下所示，并创建了一个比例尺完美大小的图像斑点。

var node = document.getElementById('scaleBar');
domtoimage.toBlob(node)
  .then(function (blob) {
      scaleBlob=blob
      saveAs(scaleBlob, 'scale.png');
  })

在这两个功能之后，我有两个要合并的图像斑点（地图顶部的比例尺）。

使用Javascript，如何将现在命名的scaleBlob和mapBlob变量组合到单个blob，然后将其保存为本地png？

保存的地图图像的示例

并保存缩放后的图像（只是一条直线，但尺寸适当）

这就是我想要的新的最终图像

Answer 1

这里是一个例子：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var circle = "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'  height='150' width='150'><circle cx='50' cy='50' r='20' stroke='black' stroke-width='3' fill='red' /></svg> ";
var blob1 = new Blob([circle], {type: "image/svg+xml;charset=utf-8"});

var rect = "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'  height='50' width='50'><rect width='30' height='50' style='fill:rgb(0,0,255)'/></svg> ";
var blob2 = new Blob([rect], {type: "image/svg+xml;charset=utf-8"});

renderImage(blob1, 0, 0)
renderImage(blob2, 20, 50)

function renderImage(blob, x , y){
  var img = new Image();
  img.onload = function(){ ctx.drawImage(img, x, y) }
  img.src = URL.createObjectURL(blob);
};

<canvas id = 'canvas'></canvas>

在这里，我只是将svg中的blob放入，但是以相同的方式，您可以对两个不同的blob进行处理，最后您可以执行saveAs