How can I access the elements of the image-gen iFrame?
Hi folks,
I want to be able to generate an image and manipulate it on the page in relation to other elements.
I know that when using the image generator we can access the dataUrl from the fulfilled Promise to get the raw image. eg.
let window.generated_images = []
...
image = {import:text-to-image-plugin}
let promptData = {
prompt: "blah",
negativePrompt: "Not blah",
resolution: "512x768",
style: "margin:0.25rem",
};
let generator = image(promptData);
generator.then(x=>function(x){
window.generated_images.push(x.dataUrl);
});
...
// Add all generated_images to the page by creating and adding <img> elements.
// Do some cool stuff like automatically detecting and appending images to sections depending on associated conditions.
But by doing this we lose access to a number of features which a packaged with the iframe. eg.
Saving to Gallery
Inspecting the prompt
"Chat With This Character" button
etc.
When attempting to access the elements within the relevant iframe I get with an XSS error.
Is there anyway for me to manipulate the iframe contained image elements after they've been generated? Or to add the lost functionality back to the dataUrl images?
How would I get the dataurl automatically? I've been trying to get that for a while. Like I see the code but how does it all work? ChatGPT is not helping very much lol. Is all of that code meant to go into the javascript? The import:text-to-image-plugin part returns an error that says text is not defined.