Атрибуция текста не захватывается при использовании изображения холста карты Mapbox-GL-JS

Question

Я использую базовые карты ESRI с Mapbox-GL-JS. Я пытаюсь сделать снимок экрана карты, используя следующий код:

this.map.getCanvas().toBlob(function (blob) {
   canvasContext.strokeStyle = '#CCCCCC';
   canvasContext.strokeRect(leftPosition, topPosition, width, height);
   var img = new Image();
   img.setAttribute("crossOrigin", "anonymous");
   var srcURL = URL.createObjectURL(blob);
   img.onload = function () {
      canvasContext.drawImage(img, leftPosition, topPosition, width, height);
      URL.revokeObjectURL(srcURL);
   };
   img.src = srcURL;
});

Я не могу понять, почему на скриншоте не указана атрибуция на карте. Я понимаю, что здесь я просто пытаюсь получить холст карты. Я даже пытался добавить текстовые элементы на холст карты, и это тоже не работает. У меня есть маркеры и маршруты, которые правильно отображаются на изображении. Я также попытался использовать базовую карту Mapbox и попробовать то же самое, но столкнулся с той же проблемой.

Любая помощь высоко ценится!

Answer 1

map.getCanvas() вернет только холст карты, но не те элементы HTML, которые расположены над картой, такие как элементы управления, логотип Mapbox или текст атрибуции. Сэм Мерфи работает над примером, показывающим, как захватить карту, включая текст логотипа и атрибуции, в изображение, которое вы можете увидеть по адресу https://github.com/mapbox/mapbox-gl-js/pull/6518/files.

Так как мы не можем легко захватить элемент HTML для изображения в JavaScript, текст атрибуции воссоздается на холсте, нарисованном в изображении.