Open execriss opened 1 month ago
This is an example of loading and saving images https://github.com/viliusle/miniPaint/blob/master/examples/open-edit-save.html
For React specifically, you can add a ref to the iframe element to retrieve it if you don't want to use the id.
import { useRef, useEffect } from 'react';
export default function ModalEditTemplate() {
const minipaintIframe = useRef(null);
const isMinipaintIframeLoaded = useRef(false);
useEffect(() => {
if (minipaintIframe.current && isMinipaintIframeLoaded.current) {
// When the iframe ref is populated from the component template,
// call API to load image...
const Layers = minipaintIframe.current.contentWindow.Layers;
const newLayer = {
// Reference example I linked above
};
Layers.insert(newLayer);
}
}, []);
function onMinipaintIframeLoad() {
isMinipaintIframeLoaded.current = true;
}
return (
<iframe
ref={minipaintIframe}
style={{ width: "70vw", height: "70vh" }}
src={`https://YOURWEBSITE.COM/miniPaint/`}
allow="camera"
onLoad={onMinipaintIframeLoad}
></iframe>
);
}
I haven't tested this code, but theoretically it should work. You need to wait for both the ref for the iframe element to be assigned, and for the iframe to load the minipaint page.
Also, I didn't notice this at first, but you'll need to self-host minipaint on your own server, not reference it from https://viliusle.github.io/.
Javascript won't talk across iframes on different domains.
Also, I didn't notice this at first, but you'll need to self-host minipaint on your own server, not reference it from https://viliusle.github.io/.
Javascript won't talk across iframes on different domains.
Thank you very much for your previous response, it has been very helpful to me. One more question, I have my project separated into client with react and server with strapi (node.js). I have the client hosted on netlify, and the server on railway. Where should I host mini paint? On railway or on netlify?
Minipaint is all client code. A bunch of js, css, and html file. It doesn't really matter, the only real requirement is that it is served from the same domain that your react code is running on, so the Javascript can communicate across the boundaries of the iframe.
@viliusle may want to consider adding a postMessage API so people can do basic things like load and save images from viliusle.github.io/miniPaint/ without having to self-host.
great
在 2024年6月19日星期三,Giwayume @.***> 写道:
@viliusle https://github.com/viliusle may want to consider adding a postMessage API so people can do basic things like load and save images from viliusle.github.io/miniPaint/ without having to self-host.
— Reply to this email directly, view it on GitHub https://github.com/viliusle/miniPaint/issues/405#issuecomment-2176774364, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLPAHBXSICTD2K6EI3JOX3ZICAJNAVCNFSM6AAAAABITTCVA2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZWG43TIMZWGQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>
Hello, I love miniPaint. It's just what I was needing for my project, but I'm having a hard time integrating it into React.
Do you have any guide or example using it in React js? I can now render the Iframe within a modal, but I am having a hard time understanding how I can send two images to the iframe, so that it can paint them one on top of the other, and I would also like to know how I can save the final image. If anyone has an example using it in React js, it would do me a great favor.