点击

Question

当我点击保存时，我一直在寻找如何将div保存为图像的答案。我到处都看，但我似乎无法找到答案，我正在使用DIV和预览按钮将div转换为图像。我发现保存为图像的最接近的是http://jsfiddle.net/epistemex/kyjs655r/这接近我需要保存为图像的内容，但问题是这是画布并且它不能与我的代码一起使用这非常类似于我的代码是乱的，这非常相似https://jsfiddle.net/8ypxW/3/我想将第一个URL的保存集成到第二个URL。

这是我的脚本，它类似于第二个网址

$(function() { 
  var element = $("#firstshirt"); // global variable
  var getCanvas; // global variable

  $("#btn-Preview-Image").on('click', function () {
    html2canvas(element, {
      allowTaint: true,
      logging: true,
      onrendered: function (canvas) {
        $("#previewImage").append(canvas);
        getCanvas = canvas;
      }
    });
  });
});

var myform = document.getElementById('myform');
myform.onsubmit = function(e) { /* do some validation on event here */ };
$("#wrapper").hover(function() {
  $("#boxes").css("border-color", "red");
},
                    function() {
  $("#boxes").css("border-color", "transparent");
});

.container {
  background-color: transparent;
  width: 490px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: hidden;
  /* Will stretch to specified width/height */
  background-size: 490px 500px;
  background-repeat: no-repeat;
}
.container5 {
  background-color: transparent;
  width: 220px;
  height: 320px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  position: absolute;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<center>
  <div id="firstshirt" class="container" style="float:left;">
    <center><div id="wrapper"><div id="boxes" class="container5" style="float:center;">
      <div data-bind="foreach:items" class="fix_backround">
        <div class="item" data-bind="draggable:true,droppable:true">
          <center>
            <span id="texter" class="text" data-bind="text:$data"></span>
            <input class="edit_text"/>
          </center>
        </div>
      </div>

      <a href="" download>
        <span id="image" class="preview-area"></span>
      </a>
      </div>
      </div>
    </center>
    <br><br><br><br>
  </div>
</center>
<br/>
</center>
</div>
</div>
<center>
  <div id="previewImage">
  </div>
</center>

上面的代码应该有一个图像，但我不想添加它，因为这需要更多的代码，我想在它们的文本框中保持简短和简单，我想将整个div保存为点击图像就像第一个网址

Answer 1

SO中有几个相同的问题。 Saving Div Contents or Canvas as Image How to take screenshot of a div with JavaScript? 一种方法是使用画布。工作解决方案是http://html2canvas.hertzen.com/

Here您可以看到使用此库的一些实际示例

Answer 2

使用此库。 ..

  

https://html2canvas.hertzen.com

现在只需选择元素和大小..它将拍摄快照作为图像..

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 300,
  height: 300
});