带有 html2canvas 的颜色选择器滴管在 iframe 上进行反应

问题描述

我需要制作一个滴管颜色选择器。为此，我决定使用 html2canvas 并调用一个在渲染时制作“屏幕截图”的函数，并在单击时添加一个 eventListener 以调用其他函数，在这种情况下只是为了在单击时控制台记录我的颜色

const saveColor = event => {
    const x = event.pageX,y = event.pageY;
    console.log(
      `rgba(${screenshotCtx.getImageData(x,y,1,1).data[0]},${screenshotCtx.getImageData(x,1).data[1]},${
        screenshotCtx.getImageData(x,1).data[2]
      },1).data[3]})`,);
  };


  const getScreenshot = () => {
    const iframe = document.getElementById('menu-preview');
    html2canvas(iframe).then(function (canvas) {
      setScreenshotCrx(canvas.getContext('2d'));
    });
  };

useEffect(() => {
    getScreenshot();
    window.addEventListener('click',saveColor);
    return () => {
      window.removeEventListener('click',saveColor);
    };
  },[]);

我的问题是，在 body 内部，我在其他组件中有一个 iframe 元素，这是主要目标，或者实际上是唯一的目标，我想要一种颜色。

          <iframe
            title="Online menu preview"
            id="menu-preview"
            ref={iframeRef}
            width={(currentDevice === 'Desktop' && '100%') || '375px'}
            height="100%"
            src={getUrl()}
          />

我的点击在 iframe 之外运行良好，但在 iframe 中没有任何反应，我尝试将 eventListener 附加到 document.getElementById('menu-preview').contentWindow，但问题是它们位于不同的域上，我不能这样做。单击 iframe 时，有没有办法调用函数 saveColor？或者您对如何实现我的目标有任何其他想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）