Question

我正在尝试使用html2canvas为html2canvas拍摄Google Maps快照。我正在使用html2canvas v 1.0.0-rc.3和Google Maps API。它在Edge和Firefox中均能正常工作，但在Chrome中会引发错误。

错误：未捕获（承诺）DOMException：无法在'CanvasRenderingContext2D'上执行'drawImage'：image参数是一个宽度或高度为0的canvas元素。

该问题似乎与Google Chrome有关，因为它在Firefox和Edge中均可使用。我知道如果我使用HTML / JS（或jQuery）可以正常工作，但是由于Im使用React会引发上述错误。

function App() {

function takeScreenshot() {
    const clickBtn = document.getElementById('theMap');
    html2canvas(clickBtn, {
      allowTaint: false,
      useCORS: true,
    }).then(canvas => {
    document.body.appendChild(canvas);
   });
  }

return (
    <div className="App">
      <div id="app">
        <button id="screenshot" onClick={() => takeScreenshot()}>
          Take screenshot html2canvas
        </button>
      </div>
      <div id="theMap">
        <Map />
      </div>
     </div>
 );
}

maps comp

export default function Map({ options, onMount, className }) {
  const props = { ref: useRef(), className };
  const onLoad = () => {
    const map = new window.google.maps.Map(props.ref.current, options);
    onMount && onMount(map);
  };

  useEffect(() => {
    if (!window.google) {
      const script = document.createElement(`script`);
      script.type = `text/javascript`;
      const API = 'API_KEY';
      script.src = `https://maps.googleapis.com/maps/api/js? 
 key=${API}&callback=resolveGoogleMapsPromise`;
      const headScript = document.getElementsByTagName(`script`)[0];
      headScript.parentNode.insertBefore(script, headScript);
      script.addEventListener(`load`, onLoad);
      return () => script.removeEventListener(`load`, onLoad);
    } else onLoad();
  });

  return (
    <div
      {...props}
      style={{
        height: `300px`,
        width: `400px`,
        margin: `1em 0`,
        borderRadius: `0.5em`
      }}
      id="map"
    />
  );
}

Map.defaultProps = {
  options: {
    center: { lat: 48, lng: 8 },
    zoom: 5
  }
};

我希望它能够像Edge和Firefox一样工作

无法使用html2canvas拍摄Google地图快照

0 个答案: