如何删除画布

这是一个用帆布将HTML转换成图像的代码.. 我有一个问题一样，当我点击预览按钮是越来越填充的图像，但如果再次尝试点击预览按钮，两个预览图像出现。如何删除画布

如何删除第一个预览？

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script> 
</head> 
<body> 
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; 
     padding-left: 25px; padding-top: 10px;"> 
     <strong>Codepedia.info</strong><hr/> 
     <h3 style="color: #3e4b51;"> 
      Html to canvas, and canvas to proper image 
     </h3> 
     <p style="color: #3e4b51;"> 
      <b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net, 
      C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs, 
      Web Design, Software</p> 
     <p style="color: #3e4b51;"> 
      <b>html2canvas</b> script allows you to take "screenshots" of webpages or parts 
      of it, directly on the users browser. The screenshot is based on the DOM and as 
      such may not be 100% accurate to the real representation. 
     </p> 
    </div> 
    <input id="btn-Preview-Image" type="button" value="Preview"/> 
    <a id="btn-Convert-Html2Image" href="#">Download</a> 
    <br/> 
    <h3>Preview :</h3> 
    <div id="previewImage"> 
    </div> 


<script> 
$(document).ready(function(){ 


var element = $("#html-content-holder"); // global variable 
var getCanvas; // global variable 

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

    $("#btn-Convert-Html2Image").on('click', function() { 
    var imgageData = getCanvas.toDataURL("image/png"); 
    // Now browser starts downloading it instead of just showing it 
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); 
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData); 
    }); 

}); 

</script> 
</body> 
</html>

来源

2017-07-31 Questions

你可能想创建一个新的预览之前删除从#previewImage DIV任何现有的子div中，因此只使用$("#previewImage").empty();调用html2canvas之前，或将图像保存到磁盘之后。

例如：

$("#btn-Preview-Image").on('click', function() { 
    $("#previewImage").empty(); // <-- this 
    html2canvas(element, { 
    onrendered: function (canvas) { 
      $("#previewImage").append(canvas); 
      getCanvas = canvas; 
     } 
    }); 
});

来源

2017-07-31 11:07:37 Groo

ü感谢这么多......它帮助.. :) – Questions

一个疑问，我添加了DIV中的一些按钮后，该分区为空的设置，然后按钮不显示 – Questions

@Questions：如果你只想删除'canvas'元素，你可以使用'$（“＃previewImage canvas”）。remove（）'来代替。 – Groo

如何删除画布

回答

相关问题