单击时将 div 保存为图像答案

【问题标题】：save div as image on click单击时将 div 保存为图像
【发布时间】：2017-04-29 07:08:15
【问题描述】：

我一直在寻找有关单击保存时如何将 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 保存为点击图片就像第一个 URL 一样

【问题讨论】：

尝试使用 html2canvas 库，它有助于将特定标记转换为画布，然后编写一个方法将此画布转换为图像并使用相同的现有逻辑进行下载

标签： javascript jquery html css

【解决方案1】：

使用这个库。 ..

https://html2canvas.hertzen.com

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

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

【讨论】：

我已经有了可以使用 html2canvas 预览图像
然后只需将图像文件作为附件发送到服务器并保存或下载到系统。
.ca 你给我一个例子

【解决方案2】：

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

Here你可以看到一些使用这个库的工作示例

【讨论】：