使用 DomToImage 后背景图像捕获一半

Question

所以我正在尝试 Dom-to-Image 但运行进入了死胡同。我有这个 div，固定的 width 和 height 分别为 700px 和 500px。这是我想用 Dom-to-Image 插件截图的 div。

当视口上的 div 为 left-aligned 时，屏幕截图完美，我可以下载图像。但是如果我用 margin: 0 auto; 使 div 居中，那么我得到 one-third 的屏幕截图而不是完整图像。

居中时的问题如下：

我想要的：

不管我的div放在哪里，我只想把那个完整的div截图。我该怎么做？

代码如下：

$(document).ready(() => {
    const imgDiv                    = document.querySelector('#div');
    const downloadBtn               = document.querySelector('#download');


   $(downloadBtn).click(() => {
          domtoimage.toBlob(imgDiv).then( blob => {
                saveAs(blob, 'myImage.png');
          });
   });
   
   
});

#div {
    width: 700px;
    height: 500px;
    background-image: url('https://img.glyphs.co/img?q=85&w=900&src=aHR0cHM6Ly9zMy5tZWRpYWxvb3QuY29tL3Jlc291cmNlcy9HZW9tZXRyaWMtQmFja2dyb3VuZC1QYXR0ZXJucy1QcmV2aWV3LTJiLmpwZw==');
    background-position: center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}


.text-block {
    display: flex;
    flex-direction: column;
    z-index: 9999;
}

.text,
.name {
    color: #fff;
    text-align: center;
    margin: 0;
}

.text {
    padding: 0 40px;
    margin-bottom: 20px;
    font-size: 15px;
}

.name {
    font-size: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="div">
     <div class="text-block">
          <p class="text">Booooooooooooooossss </p>
          <p class="name">s</p>
     </div>
</div>

<button id="download">Download</button>

Answer 1

如文档中所述：

This library uses a feature of SVG that allows having arbitrary HTML content inside of the <foreignObject> tag.

所以它基本上复制应用了 css 的元素并在 <foreignObject>.

中再次运行它们

我假设这样做是为了防止元素有背景或某种着色，他们可能没有考虑太多会改变位置的 css 属性，或者我只是没有考虑'阅读文档中的所有内容。

话虽如此，为避免这种情况，您必须嵌套元素。

所有改变元素位置的 css 属性都应该放在容器上，其他所有东西都可以留在要转换为图像的 DOM 元素上.

var NodeToImage = document.querySelector('[NodeToImage]');


domtoimage.toPng(NodeToImage)
  .then(function(dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function(error) {
    console.error('oops, something went wrong!', error);
  });

/* Container to nest the DOM element */
/* margin is applied to it instead*/
[ctr] {
  width: 100px;
  height: 100px;
  margin: 20px;
}


/* This is the DOM element to be converted */
[NodeToImage] {
  background: orange;
  height: 100%;
  /* To match the height */
}

img {
  border: 1px solid;/* For the preview*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA==" crossorigin="anonymous"></script>


<div ctr>
  <div NodeToImage></div>
</div>

旁注：我试图查看 Github 上的问题，但找不到与此相关的任何内容，也许我错过了。你可能想做一个

使用 DomToImage 后背景图像捕获一半

Background image captures in half after using DomToImage

html

javascript

css

jquery

screenshot