Question

我正在尝试将div元素保存为图像。当我按下图像时，它会附加到所述div。当我按下“保存”按钮时，它应该采用div的“屏幕截图”并添加图像（作为子项），但图像变为空白。

起初，它变成了黑色，但是我在div上将背景颜色设置为白色，现在它变成了白色。然而，div的孩子们仍然没有露面。

更新：我尝试将图像保存在我的计算机上并使用它们，而不是imgur，图像仍未显示在“屏幕截图”中。输出图像大2.15 KB，因此它们不是“空”。

我正在使用：

html2canvas.js http://html2canvas.hertzen.com/

FileSaver.js https://github.com/eligrey/FileSaver.js/

Blob.js，canvas-toBlob.js，jquery 1.9.1

$(function(){
    $("#btnSave").click(function() { 
        html2canvas( $("#base") , {
            onrendered: function(canvas) {
                theCanvas = canvas;
                canvas.toBlob(function(blob) {
                    saveAs(blob, "avatar"); 
                });
            }
        });
    });
});

在附加其他图片之前：

#base {
  width: 200px;
  height: 330px;
  float: left;
  position: relative;
  background-color: #FFF;
}

#base img {
  pointer-events: none;
}

<div id="base">
      <img src="https://i.imgur.com/wGSH6Xs.png">
    </div>

添加其他图片后

：

#base {
  width: 200px;
  height: 330px;
  float: left;
  position: relative;
  background-color: #FFF;
}

#base img {
  pointer-events: none;
}

img.onDoll {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="base">
      <img src="https://i.imgur.com/wGSH6Xs.png">
    <img class="category hair onDoll" id="item_id_1" src="https://i.imgur.com/k0TXwzN.png"></div>

更新：这是使用allowTaint：true

运行后的日志

html2canvas.js:2506 91ms html2canvas: Document cloned
html2canvas.js:2506 96ms html2canvas: Initialized CanvasRenderer with size 944 x 495
html2canvas.js:2506 97ms html2canvas: Starting NodeParser
html2canvas.js:2506 100ms html2canvas: Fetched nodes, total: 5
html2canvas.js:2506 101ms html2canvas: Calculate overflow clips
html2canvas.js:2506 105ms html2canvas: Start fetching images
html2canvas.js:2506 106ms html2canvas: Added image #1 https://i.imgur.com/wGSH6Xs.png
html2canvas.js:2506 107ms html2canvas: Added image #2 https://i.imgur.com/k0TXwzN.png
html2canvas.js:2506 108ms html2canvas: Finished searching images
html2canvas.js:2506 109ms html2canvas: Succesfully loaded image #1 ImageContainer {src: "https://i.imgur.com/k0TXwzN.png", image: img, tainted: null, promise: $$es6$promise$promise$$Promise}
html2canvas.js:2506 112ms html2canvas: Succesfully loaded image #2 ImageContainer {src: "https://i.imgur.com/wGSH6Xs.png", image: img, tainted: null, promise: $$es6$promise$promise$$Promise}
html2canvas.js:2506 113ms html2canvas: Images loaded, starting parsing
html2canvas.js:2506 113ms html2canvas: Creating stacking contexts
html2canvas.js:2506 114ms html2canvas: Sorting stacking contexts
html2canvas.js:2506 115ms html2canvas: Render queue created with 5 items
html2canvas.js:2506 118ms html2canvas: Finished rendering
html2canvas.js:2506 119ms html2canvas: Cropping canvas at: left: 72 top: 129.3125 width: 200 height: 330
html2canvas.js:2506 119ms html2canvas: Resulting crop with width 200 and height 330  with x 72 and y 129.3125
html2canvas.js:2506 121ms html2canvas: Cleaned up container
html2canvas.js:2506 122ms html2canvas: options.onrendered is deprecated, html2canvas returns a Promise containing the canvas

使用html2canvas，孩子没有出现在输出图像中

0 个答案: