我正在尝试使用html2canvas将图像复制到画布，但是它不起作用

问题描述

我正在尝试使用html2canvas将图像复制到画布，但无法正常工作。 我已经建立了一个基本的meme生成器应用程序，该应用程序从用户处获取图像并写入顶部和底部文本，然后将URL添加到输出className img中的img中，但向我显示白色空白屏幕。请帮助我。预先感谢。

import React,{ useState } from 'react';

import * as html2canvas from "html2canvas";

import './App.css';

function App() {
  const [uploadImage,setUploadImage] = useState(null);
  const [topText,setTopText] = useState("");
  const [bottomText,setBottomText] = useState("");


  const loadFile = (e) => {
    let imageSrc = URL.createObjectURL(e.target.files[0]);
    setUploadImage(imageSrc)
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    const uploadContainerRef = document.querySelector(".mainImage");
    const outputRef = document.querySelector(".output");
    html2canvas(uploadContainerRef).then(canvas => {
      const imageData = canvas.toDataURL();
      outputRef.src = imageData;
    })


  }

  return (
    <div className="App">
      <div className="container">
        <div className="text-center font-weight-bold main-heading mb-5">
          <h1 className="display-4">Meme Generator</h1>
        </div>
        <div className="text-center file-image-container">
          <input type="file" accept="image/gif,image/jpeg,image/png" name="image" id="file" onChange={loadFile} />
          <label htmlFor="file" className="btn btn-upload">
          {"Upload your Image Here"}  
          </label>
        </div>
          {
            uploadImage && 
            (
              <div className="uploaded-image-container container" 
                style={{ height: "400px",width: "500px",position: "relative" }}>
                  <div className="topText" style={{
                    fontSize: "3.5rem",fontWeight: "bolder",position: "absolute",color: "white",WebkitTextstroke: "2px black",textAlign: "center",width: "100%"
                  }}>
                     {topText} 
                  </div>
                  <img className="mainImage" style={{height: "25rem",width: "100%"}} src={uploadImage} alt="uploaded"/>
                  <div className="bottomText" style={{
                    fontSize: "3.5rem",bottom: "0",width: "100%"
                  }}>
                     {bottomText} 
                  </div>
              </div>
            )
          }
          <form onSubmit={handleSubmit}>
            <label htmlFor="topText">top text</label>
            <input type="text" value={topText} onChange={(e) => setTopText(e.target.value)} id="topText"/>
            <label htmlFor="bottomText">bottom text</label>
            <input type="text"  value={bottomText} onChange={(e) => setBottomText(e.target.value)} id="bottomText" />
            <button type="submit" >Create Meme</button>
          </form>


          <img className="output" />
      </div>
    </div>
  );
}

export default App;

解决方法

您需要在allowTaint选项中将true设置为html2canvas。它可以渲染跨域图像：

html2canvas(uploadContainerRef,{ allowTaint: true }).then(canvas => {...})

以下是所有选项的文档：https://html2canvas.hertzen.com/configuration。

顺便说一句，您应该使用useRef来访问由React生成的元素，而不是使用querySelector。有关参考和useRef的更多信息，请参见以下内容：

https://reactjs.org/docs/refs-and-the-dom.html

https://reactjs.org/docs/hooks-reference.html#useref