将div保存为点击图像

Question

我一直在寻找关于如何在点击保存时将div保存为图像的答案。我看到处处都是，但我似乎无法找到答案，我正在使用DIV和预览按钮将div转换为图像。最接近的东西，我发现保存为一个图像http://jsfiddle.net/epistemex/kyjs655r/这是接近我需要保存为图像，但问题是，这是帆布，它不与我的代码工作，这是非常类似于我有我的代码是凌乱的这是非常相似的https://jsfiddle.net/8ypxW/3/我想集成保存从第一个URL到第二个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

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 
});