Dom to Image：如何下载动态生成的图像

如何解决Dom to Image：如何下载动态生成的图像

我正在开发一个简单的工具，允许用户上传图像（主要是书籍封面）、添加特定背景、创建阴影然后下载。

我正在使用 dom-to-image 库，理论上它可以工作。我现在可以生成一个 SVG 文件，但是当我尝试将其转换为 JPEG 时，它看起来像是空的。

现在，我对这个库没有太多经验，我想知道这是不是因为图像实际上没有存储在那里，如果是这样，我该如何让它工作。

如果有人会问，我已经尝试过 html2canvas，但它的问题在于它不允许框阴影。

这些是最重要的代码部分，也可以在此处预览该工具：Contains

HTML

      .   ____          _            __ _ _
     /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
    ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
     \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
      '  |____| .__|_| |_|_| |_\__,| / / / /
     =========|_|==============|___/=/_/_/_/
     :: Spring Boot ::                (v2.4.3)
    o.s.web.servlet.dispatcherServlet        : Completed initialization in 0 ms
    2021-02-27 12:52:37.406  INFO 17984 --- [nio-8080-exec-1] c.e.springmultirequest.DetailController  : idRequest: 1
    2021-02-27 12:52:37.406  INFO 17984 --- [nio-8080-exec-1] c.e.springmultirequest.DetailController  : Name: john
    2021-02-27 12:52:37.622  INFO 17984 --- [nio-8080-exec-6] c.e.springmultirequest.DetailController  : idRequest: 2
    2021-02-27 12:52:37.622  INFO 17984 --- [nio-8080-exec-6] c.e.springmultirequest.DetailController  : Name: john
    2021-02-27 12:52:37.622  INFO 17984 --- [nio-8080-exec-6] c.e.springmultirequest.DetailController  : Last name: cena
    2021-02-27 12:52:37.676  INFO 17984 --- [nio-8080-exec-8] c.e.springmultirequest.DetailController  : idRequest: 3
    2021-02-27 12:52:37.676  INFO 17984 --- [nio-8080-exec-8] c.e.springmultirequest.DetailController  : mobileNumber: 09XXXXXXX0
    2021-02-27 12:52:37.676  INFO 17984 --- [nio-8080-exec-8] c.e.springmultirequest.DetailController  : email: nick@yahoo.com
    2021-02-27 12:52:37.738  INFO 17984 --- [nio-8080-exec-5] c.e.springmultirequest.DetailController  : idRequest: 4
    2021-02-27 12:52:37.738  INFO 17984 --- [nio-8080-exec-5] c.e.springmultirequest.DetailController  : pet: dog
    2021-02-27 12:52:37.738  INFO 17984 --- [nio-8080-exec-5] c.e.springmultirequest.DetailController  : color: black
    2021-02-27 12:52:37.738  INFO 17984 --- [nio-8080-exec-5] c.e.springmultirequest.DetailController  : sex: F

<div id="app">

    <div class="buttons-shadow">
      <button id="buttonShadow1">Small Shadow</button>
      <button id="buttonShadow2">Medium Shadow</button>
      <button id="buttonShadow3">Big Shadow</button>
    </div>

    <div class="file-upload" id="capture">
  
      <div class="image-upload-wrap">
        <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
        <div class="drag-text">
          <h3>Drag and drop a file or select add Image</h3>
        </div>
      </div>
      <div class="file-upload-content">
          <img class="file-upload-image" id="scream" src="#" alt="your image" />
        <div class="image-title-wrap">
          <button type="button" onclick="removeImage()" class="remove-image">Remove <span class="image-title">Image</span></button>
        </div>
      </div>
    </div>

    <div class="right">
      <button id="saveImage" @click="saveCanvas()">Save<br>Image</button>
    </div>

    <button onclick="screenshot()">Take screenshot</button>
    
  </div>

非常欢迎任何建议或建议。如果您有关于如何使用 html2canvas 的想法也会很棒。

非常感谢您的帮助！

最好的，马可