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