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

【问题标题】：I am trying copy the image to canvas using the html2canvas but its not working我正在尝试使用 html2canvas 将图像复制到画布，但它不起作用
【发布时间】：2020-08-12 01:10:32
【问题描述】：

我正在尝试使用 html2canvas 将图像复制到画布，但它不起作用。 我已经设置了一个基本的 meme 生成器应用程序，它从用户那里获取图像并写入顶部和底部文本，然后将 url 添加到输出类名 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",
                    fontWeight: "bolder",
                    position: "absolute",
                    bottom: "0",
                    color: "white",
                    WebkitTextStroke: "2px black",
                    textAlign: "center",
                    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;

【问题讨论】：

标签： reactjs html2canvas

【解决方案1】：

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

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

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

顺便说一句，你应该使用 useRef 来访问 React 生成的元素，而不是使用 querySelector。有关 refs 和 useRef 的更多信息，请参阅这些：

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

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

【讨论】：