[英]html2canvas screenshot keeps turning up blank
我正在嘗試在淡紫色線的右側獲取圖像的屏幕截圖(因此,在“今日的服裝”標題下方(如下所示)。
我正在使用html2canvas來執行此操作,但是每次單擊“快照”按鈕時,都會得到一個空白的屏幕截圖。
這是我的HTML:
<div id="sidebar"><br/><center><h1 class = "outfitheading">Today's Outfit</h1></center>
<div id = "outfit">
<center><div class = "clothediv" id = "hatdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
</div></center>
<center><div class = "clothediv" id= "semitopdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
</div></center>
<center><div class = "clothediv" id = "topdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
</div></center>
<center><div class = "clothediv" id = "legweardiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
</div></center>
<center><div class = "clothediv" id = "shoediv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
</div></center>
</div>
<button onclick="takeScreenShot()">Snapshot</button>
<center><div id= "likebutton" style = "display:none; visibility: hidden">
<a href = "#" ><i id = "outlinehearticon" class="fa fa-heart-o fa-2x" aria-hidden="true" onclick = {fillHeart()}></i></a>
<a href = "#" ><i id = "filledhearticon" class="fa fa-heart fa-2x" aria-hidden="true" style = "display:none; visibility: visible" onclick = {unfillHeart()}></i></a>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</div></center>
<br/>
<br/>
<div class = "buttons"><center>
<button class = "btn btn-lg btn-secondary generatebutton" style = "display: inline-block" type = "button" id= "generateoutfitbutton" onclick = {generateOutfit()}>Generate Outfit</button>
<!--<p><center>or</center></p>-->
 
 
<button class = "btn btn-lg btn-secondary collagebutton" style = "display: inline-block" type = "button" id= "collagebutton" onclick = {clearCanvas()}>Make your Own</button></center>
</div>
</div>
這是我的JavaScript:
var takeScreenShot = function() {
html2canvas(document.getElementById("outfit"), {
onrendered: function (canvas) {
var tempcanvas=document.createElement('canvas');
tempcanvas.width=465.5;
tempcanvas.height=524;
var context=tempcanvas.getContext('2d');
context.drawImage(canvas,465.5,40,465.5,524,0,0,465.5,524);
var link=document.createElement("a");
link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS
link.download = 'screenshot.jpg';
link.click();
}
});
}
這是我的代碼的簡化jsfiddle: https ://jsfiddle.net/e51yepcz/
有誰知道為什么快照不起作用或如何解決? 謝謝。
我編輯了您的小提琴,並出現以下錯誤:
未捕獲的ReferenceError:未定義takeScreenShot
所以我改變了一些,似乎可以工作。
我為您的按鈕添加了一個ID:
<center><button id="snap">Snapshot</button></center>
和javascript事件(jQuery):
$('#snap').click(function () {
html2canvas(document.getElementById("outfit"), {
onrendered: function(canvas) {
var tempcanvas = document.createElement('canvas');
tempcanvas.width=465;
tempcanvas.height=524;
var context=tempcanvas.getContext('2d');
context.drawImage(canvas,465,40,465,524,0,0,465,524);
var link=document.createElement("a");
link.href=canvas.toDataURL('image/jpg');
link.download = 'screenshot.jpg';
link.click();
}
});
});
這是JsFiddle
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.