我正在尝试导出 map ，但我总是遇到同样的错误:
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
我有以下代码:
var canvas = event.context.canvas;
var exportPNGElement = document.createElement('a');
exportPNGElement.download = 'Mapa.png';
exportPNGElement.href = canvas.toDataURL('image/png');
document.body.appendChild(exportPNGElement);
exportPNGElement.click();
document.body.removeChild(exportPNGElement);
怎么了？你有什么想法吗？
最佳答案
老实说，我没有回答你的问题。我没有检查为什么你的例子不起作用。但我建议使用不同的方法:
canvas.toDataUrl 非常不可靠，因为浏览器会根据导出文件的大小崩溃。它只适用于非常轻量级的 map 。对于大多数现实生活中的应用程序，您将不得不使用 canvas.toBlob。
关于 canvas.toBlob 的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
canvas.toBlob 适用于 Firefox ( https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility )，很快将在 Chrome ( https://code.google.com/p/chromium/issues/detail?id=67587#c101 ) 中实现。
同时，您可以使用 canvas-toBlob ( https://github.com/eligrey/canvas-toBlob.js ) 和 FileSaver.js ( https://github.com/eligrey/FileSaver.js )。
请看这里的例子:
使用原生 canvas.toBlob(适用于 Firefox): https://jsfiddle.net/oj7451L5/15/
为 canvas.toBlob 使用垫片:http://codepen.io/barbalex/pen/raagKq
我已经使用这种方法成功下载了 8MB 的 png 文件。
我已经打开了一个请求使用 canvas.toBlob 添加示例的问题:https://github.com/openlayers/ol3/issues/2968
关于javascript - 在 OpenLayer 3 + Javascript 中无法导出 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32040633/