當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地

發(fā)布時(shí)間：2025/4/14 HTML 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

由于客戶的需求，將js寫(xiě)出來(lái)的一個(gè)統(tǒng)計(jì)能夠保存到本地。作為碼奴的我只能慢慢搬磚咯！一開(kāi)始使用的是html2canvas.js。功能是可以實(shí)現(xiàn)，但是有缺陷。話不多說(shuō)開(kāi)始搞！

1、引入幾個(gè)JS庫(kù)

①：jquery 版本還沒(méi)試過(guò)我用的是3.1.1 （不貼鏈接了，這個(gè)要找很容易）

②：dom-to-image.js （點(diǎn)擊下載? 下載下來(lái)解壓開(kāi)在src目錄里面）

③：FileSaver.js?（點(diǎn)擊下載??下載下來(lái)解壓開(kāi)在src目錄里面）

2、新建HTML引入第一步中的幾個(gè)庫(kù)

3、生成圖片

3.1、生成png圖片

3.2、生成下載圖片

//保存圖片$("#btnToImg").click(function () {domtoimage.toBlob(document.getElementById('chartdiv')).then(function (blob) {window.saveAs(blob, 'ImgName.jpg');});});

我寫(xiě)的是一個(gè)按鈕的安吉事件

3.3、生成jpeg圖片

domtoimage.toJpeg(document.getElementById('chartdiv'), { quality: 0.95 }).then(function (dataUrl) {var link = document.createElement('a');link.download = 'Imgname.jpeg';link.href = dataUrl;link.click();});

使用的額時(shí)候只要調(diào)方法就可以了

下面貼上Demo源碼

<html> <head><script type="text/javascript" src="jquery-3.3.1.js"></script><script type="text/javascript" src="dom-to-image.js"></script><script type="text/javascript" src="FileSaver.js"></script><script type="text/javascript">$(function () {$("#btnSave").click(function () {// 下載png圖片 domtoimage.toBlob(document.getElementById('dvMain')).then(function (blob) {window.saveAs(blob, '123.png');});});});</script> </head> <body><input type="button" id="btnSave" value="保存圖片" /><div id="dvMain"> <h1>123456789</h1><h2>H2H2H2</h2> <p>段落里面的內(nèi)容</p> <span>span里面的內(nèi)容</span><table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black; width:80%;"><tr><td rowspan="3">111</td><td>222</td><td>333300</td></tr><tr><td rowspan="2">444</td><td>555</td></tr><tr ><td>666</td></tr><tr><td rowspan="3">77</td><td>888</td><td>999</td></tr><tr ><td>000</td><td>QQQ</td></tr><tr><td>WWW</td><td>EEE</td></tr></table></div> </body> </html>

中間表格中海油跨行跨列的都沒(méi)有什么問(wèn)題。

4、問(wèn)題:

我現(xiàn)在是弄好了保存成png或者是jpg的時(shí)候用win10 系統(tǒng)自帶的windows自帶的照片查看器看著會(huì)模糊不知道是我個(gè)人電腦的問(wèn)題還是都是這個(gè)問(wèn)題

看著就這種。

用附件中的畫(huà)畫(huà)和其他工具打開(kāi)又沒(méi)有什么問(wèn)題

下了班等下回去家里的電腦看看！

轉(zhuǎn)載于:https://www.cnblogs.com/w5942066/p/10485263.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： java 图片上传
下一篇： 83. Remove Duplicate