<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>snapdom demo</title>
<style>
* {
border: 0 solid;
}
</style>
</head>
<body>
<code id="ua"></code>
<br />
<button id="snapdom">snapdom</button>
<button id="download">download svg</button>
<div style="outline: 1px solid red">
<main>
<br/>
<canvas id="canvas" width="300" height="100"></canvas>
<br/>
</main>
</div>
<h2>snapdom result</h2>
<div id="snapdom-result" style="outline: 1px solid green"></div>
<h2>iframe preview</h2>
<div id="iframe-preview" style="outline: 1px solid green"></div>
</body>
<script type="module">
document.getElementById("ua").textContent = navigator.userAgent;
import { snapdom } from "https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.mjs";
document.getElementById("snapdom").addEventListener("click", async () => {
const $main = document.querySelector("main");
const result = await snapdom($main);
const $img = await result.toPng();
document.getElementById("snapdom-result").innerHTML = "";
document.getElementById("snapdom-result").appendChild($img);
const $iframe = document.createElement("iframe");
$iframe.src = result.url;
$iframe.style.width = "100%";
$iframe.style.height = $main.offsetHeight + 200 + "px";
document.getElementById("iframe-preview").innerHTML = "";
document.getElementById("iframe-preview").appendChild($iframe);
});
document.getElementById("download").addEventListener("click", async () => {
const $main = document.querySelector("main");
const result = await snapdom($main);
await result.download({ format: "svg", filename: "screenshot" });
});
window.addEventListener('DOMContentLoaded', async () => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.getElementById("snapdom").click()
});
</script>
</html>
Describe it simply:
If tailwindcss is used, there will be a global border style
When we capture the canvas, the converted image will have the following style
but not
border-witdh: 0;Quick demo to reproduce
demo:
Anything else we should know?
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36