Export is completly blank
Author: M1dnight-ofclCreated Jul 26, 2024Updated Apr 28, 2025
Expected behavior
I was expecting it to export my element, but it exported a completly blank image with no errors in console. For context, I am using react if that helps, but it should make sense. Here is my code:
import "./style/style.css";
import { Window } from "../sdk/sdk";
import { useState } from "react";
// import html2canvas from "html2canvas";
import domtoimage from 'dom-to-image';
const RenderImage=()=>{
const[winData,setWinData]=useState({
title:"Test Window",
icon:"Information",
src:`# Hello!`,
});
return(<div id="renderImages">
<div id="ri_params">
<h1>Window Parameters</h1>
<hr />{/*--------------------*/}
<h2>Window Title</h2>
<input
id="windowTitle"
defaultValue="Test Window"
onChange={(e)=>{
setWinData(prevState=>({
...prevState,
title:e.target.value,
}))
}}></input>
<h2>Window Content</h2>
<textarea
id="windowContents"
cols="40"
rows="5"
defaultValue="# Hello!"
onChange={(e)=>{
setWinData(prevState=>({
...prevState,
src:e.target.value,
}))
}}></textarea>
</div>
<div id="maximizePreview"></div>
<Window
size={{
"height": "38vmin",
"width": "58vmin"}}
pos={{
"x":["left","calc(50% - (58vmin / 2) + 10vmin)"],
"y":["top","calc(50% - (38vmin / 2))"],}}
includeTitlebarOptions={{
"min": true,
"max": true,
"close": true,
}}
customLayer="999"
id="testwin"
title={winData.title}
icon={`/icons/xp/${winData.icon}.png`}
markdownSource={winData.src}>
</Window>
<button id="export" onClick={(e)=>{
e.preventDefault();
var win=document.getElementById("win_testwin");
//! depricated but working
// html2canvas(win,{
// backgroundColor:null}).then(canvas=>{
// // document.body.appendChild(canvas);
// var image=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
// var link=document.createElement('a');
// link.setAttribute('download','BeansiteXP_Window.png');
// link.setAttribute('href',image);
// link.click();
// });
// domtoimage.toSvg(win)
domtoimage.toPng(win)
.then((dataUrl)=>{
var link=document.createElement("a");
link.href=dataUrl;
link.download="Window";
link.click();
}).catch(()=>{console.error("failed to export")});
}}>Export</button>
</div>)
};
export default RenderImage;Actual behavior (stack traces, console logs etc)
Everything works as usual, however, when I click export button, it exports a completely blank image. No errors in console. it just doesn't work.
Library version
2.6.0
Browsers
Originally tested in Opera 112.0.5197.30 but was trested and did not work in Firefox 128.0.3
Source: tsayen/dom-to-image