Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
生活随笔
收集整理的這篇文章主要介紹了
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
由于客戶的需求，將js寫出來的一個統計能夠保存到本地。作為碼奴的我只能慢慢搬磚咯！一開始使用的是html2canvas.js。功能是可以實現，但是有缺陷。話不多說開始搞！
1、引入幾個JS庫
①：jquery 版本還沒試過我用的是3.1.1 （不貼鏈接了，這個要找很容易）
②：dom-to-image.js （點擊下載? 下載下來解壓開在src目錄里面）
③：FileSaver.js?（點擊下載??下載下來解壓開在src目錄里面）
2、新建HTML引入第一步中的幾個庫
3、生成圖片
3.1、生成png圖片
<script> var jd= document.getElementById('標簽ID'); domtoimage.toPng(jd).then(function (url) {var img = new Image();img.src = url;document.body.appendChild(img);}).catch(function (e) {console.log('生成圖片出錯', e);}); </script>3.2、生成下載圖片
//保存圖片$("#btnToImg").click(function () {domtoimage.toBlob(document.getElementById('chartdiv')).then(function (blob) {window.saveAs(blob, 'ImgName.jpg');});});我寫的是一個按鈕的安吉事件
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();});?
使用的額時候只要調方法就可以了
下面貼上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>段落里面的內容</p> <span>span里面的內容</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>?
中間表格中海油跨行跨列的都沒有什么問題。
4、問題:
我現在是弄好了保存成png或者是jpg的時候用win10 系統自帶的windows自帶的照片查看器看著會模糊 不知道是我個人電腦的問題還是都是這個問題
看著就這種。
用附件中的畫畫和其他工具打開又沒有什么問題
下了班等下回去家里的電腦看看！
?
轉載于:https://www.cnblogs.com/w5942066/p/10485263.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 图片上传
- 下一篇： 83. Remove Duplicate