toHtml method

String toHtml({
  1. String title = 'Artisanal capture',
})

Builds a self-contained, script-free preview of the exact PNG.

The image retains its native pixel dimensions instead of being scaled to the browser viewport. No web fonts, JavaScript, or network access is used.

Implementation

String toHtml({String title = 'Artisanal capture'}) {
  const escape = HtmlEscape();
  final label = escape.convert(title);
  final warnings = diagnostics.isEmpty
      ? ''
      : '<section aria-label="Fidelity diagnostics"><h2>Diagnostics</h2>'
            '<ul>${diagnostics.map((item) => '<li>${escape.convert(item)}</li>').join()}</ul>'
            '</section>';
  return '''<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'">
<title>$label</title>
<style>
:root { color-scheme: dark; }
body { margin: 0; background: #17191b; color: #e6e8e9; font: 14px/1.5 monospace; }
header, section { padding: 18px 24px; }
header { border-bottom: 1px solid #393d40; }
h1 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
p { margin: 0; color: #a9afb3; }
main { overflow: auto; padding: 24px; }
img { display: block; max-width: none; }
h2 { font-size: 14px; }
section { color: #f1c878; border-top: 1px solid #393d40; }
</style>
</head>
<body>
<header><h1>$label</h1><p>$columns × $rows cells · $width × $height pixels · native PNG</p></header>
<main><img src="data:image/png;base64,${base64Encode(_png)}" width="$width" height="$height" alt="$label"></main>
$warnings
</body>
</html>
''';
}