lo que estoy tratando de lograr es tener un componente que no sea visible para el usuario en ningún momento, luego convertirlo en una imagen y luego llevarlo al portapapeles del usuario. Esto es lo que tengo ahora.

 const generateImage = () => { const component = document.getElementById("component"); if (component) { toBlob(component) .then(function (blob: any) { const textBlob: any = new Blob(["I am a string"], { type: "text/plain", }); navigator.clipboard .write([ new ClipboardItem({ "image/png": blob, "text/plain": textBlob, }), ]) .catch((e) => console.log(e)); }) .catch((err) => console.log(err)); } };

Funciona bien cuando el componente está a la vista (aunque la imagen salió un poco desplazada hacia la derecha, pero esto probablemente tenga que ver con mi estilo), pero cuando probé algo como

 position: absolute; left: -1000%;

Me dejaría con un portapapeles vacío.

Me he topado con algo como OffscreenCanvas, pero no tengo idea de cómo usarlo correctamente y tal vez haya una solución más limpia para mi problema.