Atlaslog
Atlaslog / Field Notes / 3D & Cesium
Field note · 3D & Cesium

toDataURL returns a black image, Cesium included

Quick answer

The scene looks right on screen but the exported PNG is black or fully transparent. Either the WebGL drawing buffer was already cleared because preserveDrawingBuffer is off, or cross-origin imagery tainted the canvas.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: CesiumJS 1.121
Symptom
Checklist
  1. Call toDataURL directly inside the click handler to separate timing from cross-origin.
  2. Read the error text: Tainted canvases means CORS, silence means an empty buffer.
  3. Look for setTimeout, await or requestAnimationFrame between the render and the capture.
  4. Check whether tile responses carry Access-Control-Allow-Origin.
Fix

Pass contextOptions with webgl preserveDrawingBuffer true and alpha false to the Viewer, or capture inside scene.postRender after requestRender. For tainted canvases add Access-Control-Allow-Origin on the tile server.

Code
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement':
Tainted canvases may not be exported.
var viewer = new Cesium.Viewer('cesiumContainer', {
  contextOptions: {
    webgl: {
      preserveDrawingBuffer: true,
      alpha: false
    }
  }
});
Watch out
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

Atlaslog (2026). toDataURL returns a black image, Cesium included. https://www.jingweizhi.com/en/cookbook/cesium-screenshot-black.html (accessed 2026-11-03).