html2canvas

  1. Profile picture cross-domain problem (you can use a proxy to transform the domain name of the image) and configure ituseCORS: true
  2. The screenshot is not loaded yet, and the picture is lost. Please see the solution below
  3. Images in SVG format cannot generate screenshots, try to use PNG, JPG images, useimgLabel, the background image will be blurred
  4. If you want to preview the screenshot, the following area is scrollable again, note the problem of scrolling through
  5. Set up thez-index:-999The base map should not be beyond the viewport, otherwise it will accidentally drop pictures
  6. Problem with the white screen at the top: since the screenshots are taken from the viewport, it’s best to set the position to fixed
  7. White margins appear:html2canvas(dom, { useCORS: true, backgroundColor: '#3388ff' })Set a similar background color to cover the white edges.
// Get the DOM node you want to transform
const dom = document.getElementById('id') as HTMLElement;

html2canvas(dom, { useCORS: true.backgroundColor: '#3388ff' })
  .then(canvas= > {
    // Handle rolling penetration
    const wrapperDom = document.getElementById(
      'contribution-rank'
    ) as HTMLElement;
    wrapperDom.style.overflowY = 'hidden';

    let base64Img = canvas.toDataURL('image/png'.1.0);
    setSrc(base64Img);
    Toast.hide();
  })
  .catch(err= > {
    console.log('html2canvas:', err, 1);
    Toast.fail('Failed to generate image, please try again'.1);
    Toast.hide();
  });
Copy the code