html を 画像化する https://github.com/gripeless/pico の、コアっぽい部分を抜き出した
canvas.toDataURL("image/png") で任意のフォーマットで吐き出し| const template = (html: string, width: number, height: number) => ` | |
| <div style="position: absolute; left: -1000000;"> | |
| <svg id="capture-root" width=${width} height=${height}> | |
| <foreignObject width=${width} height=${height}> | |
| <body> | |
| ${html} | |
| </body> | |
| </foreignObject> | |
| </svg> | |
| </div> | |
| `; | |
| function captureAsDataURI(html: string, width: number, height: number) { | |
| const el = document.createElement("div"); | |
| el.innerHTML = template(html, width, height); | |
| document.body.appendChild(el); | |
| const encoded = window.encodeURIComponent( | |
| new XMLSerializer().serializeToString( | |
| document.querySelector("#capture-root") | |
| ) | |
| ); | |
| el.remove(); | |
| return `data:image/svg+xml;charset=utf-8,${encoded}`; | |
| } | |
| async function run() { | |
| const img = new Image(); | |
| const dataUri = captureAsDataURI( | |
| "<p>Here is a paragraph that requires word wrap</p></body>", | |
| 300, | |
| 300 | |
| ); | |
| img.src = dataUri; | |
| await new Promise((r) => (img.onload = r)); | |
| const canvas = document.createElement("canvas"); | |
| document.body.appendChild(canvas); | |
| const ctx = canvas.getContext("2d"); | |
| ctx.drawImage(img, 0, 0); | |
| const pngDataUrl = canvas.toDataURL("image/png", 1); | |
| canvas.remove(); | |
| console.log(pngDataUrl); | |
| } | |
| run(); |