Не могли бы вы предложить какое-либо решение для экспорта изображений сервера? (Как OSM) - PullRequest
Новая
       10

Не могли бы вы предложить какое-либо решение для экспорта изображений сервера? (Как OSM)

1 голос
/ 10 января 2020

Я попытался экспортировать мой экспорт образов OSM в формат .png или .jpeg . Я не смог экспортировать изображения с сервера. Я приложил простой пример с образом OSM. Кто-нибудь изо всех сил пытался решить вышеуказанную проблему. Обратитесь к приведенному ниже образцу стекаблиц.

Образец - https://stackblitz.com/edit/export-osm?file=index.js


document.getElementById('Export').onclick = function() {  
    var foreign = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "foreignObject"
    );
    var annoationElement = document.getElementById("tiles");
    foreign.innerHTML = annoationElement.outerHTML;
    annoationElement.style.display = "none";
    var svg = document.querySelector("#svgtitle");
    svg.appendChild(foreign);
    var svgData = new XMLSerializer().serializeToString(svg);
    var canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    var svgSize = svg.getBoundingClientRect();
    canvas.width = svgSize.width;
    canvas.height = svgSize.height;
    var ctx = canvas.getContext("2d");
    var img = document.createElement("img");
    img.setAttribute(
      "src", 
      "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData)))
    );
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      var imagedata = canvas.toDataURL("image/png");
      var anchor = document.createElement("a");
      debugger
      anchor.download = "OSM.png";
      debugger
      anchor.href = imagedata;
      document.body.appendChild(anchor);
      anchor.click();
      canvas.remove();
    };
  }
...