openlayers-3 - 在 Openlayers 3 中打印 (pdf)

Question

我为 openlayers 3 制作了一个打印工具，它以 PDF 格式打印。这是我以 pdf 格式打印的代码。

var dims = {
  a0: [1189, 841],
  a1: [841, 594],
  a2: [594, 420],
  a3: [420, 297],
  a4: [297, 210],
  a5: [210, 148]
  };

  var exportElement = document.getElementById('export-pdf');

  exportElement.addEventListener('click', function(e) {

  if (exportElement.className.indexOf('disabled') > -1) {
    return;
  }
  exportElement.className += ' disabled';

  var format = document.getElementById('format').value;
  var resolution = document.getElementById('resolution').value;
  var buttonLabelElement = document.getElementById('button-label');
  var label = buttonLabelElement.innerText;
  var dim = dims[format];
  var width = Math.round(dim[0] * resolution / 25.4);
  var height = Math.round(dim[1] * resolution / 25.4);
  var size = /** @type {ol.Size} */ (map.getSize());
  var extent = map.getView().calculateExtent(size);

  map.once('postcompose', function(event) {
    //var tileQueue = map.getTileQueue();

    // To prevent potential unexpected division-by-zero
    // behaviour, tileTotalCount must be larger than 0.

    //var tileTotalCount = tileQueue.getCount() || 1;
    var interval;
    interval = setInterval(function() {
      //var tileCount = tileQueue.getCount();
      //var ratio = 1 - tileCount / tileTotalCount;
      //buttonLabelElement.innerText = ' ' + (100 * ratio).toFixed(1) + '%';
      //if (ratio == 1 && !tileQueue.getTilesLoading()) {
        clearInterval(interval);
        buttonLabelElement.innerText = label;
        var canvas = event.context.canvas;
        var data = canvas.toDataURL('image/jpeg');
        var pdf = new jsPDF('landscape', undefined, format);
        pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
        pdf.save('map.pdf');
        map.setSize(size);
        map.getView().fitExtent(extent, size);
        map.renderSync();
        exportElement.className =
            exportElement.className.replace(' disabled', '');
     // }
    }, 100);
  });

  map.setSize([width, height]);
  map.getView().fitExtent(extent, /** @type {ol.Size} */ (map.getSize()));
  map.renderSync();

}, false);

当我只有 OSM 层时，我可以打印 PDF，但是当我从我的地理服务器添加本地层时，我无法打印任何东西，整个应用程序被卡住。

谁能告诉我我做错了什么？

我正在使用 jspdf 打印 pdf。

阿杰

Answer 1

您的问题是您从其他域加载图像，并且没有为它们配置 CORS。参见 https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image有关跨源图像使用的说明。

为了从 Canvas 中获取数据，放入其中的所有图像必须来自同一域或使用适当的 Access-Control-Allow-Origin header 传输。

我会研究如何设置您的服务器以使用这些 header 提供 map 图像。您还应该查看 ol3 源上的 crossOrigin 选项。