示例：takeScreenShot

依赖库导入

import { Postmate } from '@nobook/nobook-saas-sdk';
import { Button } from 'antd';

实时编辑器

function takeScreenShot() { const playerURL = `https://share-wuli.nobook.com/index.html?sharedata=eyJ1c2VySWQiOjQ1LCJpZCI6ImRlLWNsMDljbHZkODAwMDUzZmF0Y3Iyb2J0c20ifQ==&editor-share-hide=1`; const container = useRef(null); const img = useRef(null); let postMate, communication; useEffect(() => { if (container.current) { postMate = new Postmate({ container: container.current }); postMate.init(playerURL) .then((data) => { communication = data; }); } }, []) async function buttonClick() { if (!communication) { return; } const imgData = await communication.get('takeScreenShot', { x: 0, y: 0, outWidth: 320, outHeight: 240, type: 'png' }); img.current.src = imgData; } return ( <div> <div> <div className="iframe-container" ref={container}></div> <img ref={img}/> </div> <Button onClick={buttonClick}>截图</Button> </div> ); }

function takeScreenShot() {
  const playerURL = `https://share-wuli.nobook.com/index.html?sharedata=eyJ1c2VySWQiOjQ1LCJpZCI6ImRlLWNsMDljbHZkODAwMDUzZmF0Y3Iyb2J0c20ifQ==&editor-share-hide=1`;
  const container = useRef(null);
  const img = useRef(null);

  let postMate, communication;

  useEffect(() => {
    if (container.current) {
      postMate = new Postmate({ container: container.current });
      postMate.init(playerURL)
        .then((data) => {
          communication = data;
        });
    }
  }, [])

  async function buttonClick() {
    if (!communication) {
      return;
    }
    const imgData = await communication.get('takeScreenShot', { x: 0, y: 0, outWidth: 320, outHeight: 240, type: 'png' });
    img.current.src = imgData;
  }

  return (
    <div>
      <div>
        <div className="iframe-container" ref={container}></div>
        <img ref={img}/>
      </div>
      <Button onClick={buttonClick}>截图</Button>
    </div>
  );
}

结果

Loading...