一.引用js腳本包,html2canvas.js為截圖包，使用非常簡單
<script src="~/Content/html2canvas.js"></script>，到網上下載
二.要保存的html元素
<body>
<div id="header"></div>
<div id="main">
<div id="sharecontent">
<div id="sharedownload">
<img src="/@ViewBag.BackImg" />
</div>
<div id="shareqrcode">
<div>
<img src="/@ViewBag.RQcode" />
<p>@@<span>@(ViewBag.agentName)的大V號主頁</span></p>
<p>MB:@ViewBag.Phone</p>
</div>
</div>
</div>
<div id="previewImage" style="display:none;"></div>
</div>
<div id="footer"></div>
</body>
三.js代碼
var element = $("#sharecontent"); //要截圖的div var getCanvas; $("#SaveDownload").click(function () //點擊"保存下載控件" { //newName,保存圖片的新名稱，防止重復 var newName = new Date().getTime().toString(16) + Math.ceil(Math.random() * 10000).toString(16); html2canvas(element, { onrendered: function (canvas) { //$("#previewImage").append(canvas); //可以，追加到界面上預覽 //getCanvas = canvas; var imgageData = canvas.toDataURL("image/png");//把canvas轉為base64圖片 //下面的代碼是，給a標簽的href鏈接圖片地址，然后下載 var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#btn-SaveDownload").attr("download", newName+".png").attr("href", newData); $("#btn-SaveDownload")[0].click(); } }); })
轉載：http://www.webkaka.com/tutorial/html/2019/030747/