Asp.Net 將HTML中通過dom-to-image.js標簽div內的內容轉化為圖片保存到本地

番茄西紅柿發布于2019-04-23 11:47 / 2504人閱讀

摘要：由于客戶的需求，將寫出來的一個統計能夠保存到本地。作為碼奴的我只能慢慢搬磚咯一開始使用的是。功能是可以實現，但是有缺陷。用附件中的畫畫和其他工具打開又沒有什么問題下了班等下回去家里的電腦看看

由于客戶的需求，將js寫出來的一個統計能夠保存到本地。作為碼奴的我只能慢慢搬磚咯！一開始使用的是html2canvas.js。功能是可以實現，但是有缺陷。話不多說開始搞！

1、引入幾個JS庫

①：jquery 版本還沒試過我用的是3.1.1 （不貼鏈接了，這個要找很容易）

②：dom-to-image.js （點擊下載 下載下來解壓開在src目錄里面）

③：FileSaver.js （點擊下載 下載下來解壓開在src目錄里面）

2、新建HTML引入第一步中的幾個庫

3、生成圖片

3.1、生成png圖片

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>123456789h1>

<h2>H2H2H2h2>
<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">111td>
            <td>222td>
            <td>333300td>
        tr>
        <tr>
            <td rowspan="2">444td>
            <td>555td>
        tr>
        <tr >
            <td>666td>
        tr>
        <tr>
            <td rowspan="3">77td>
            <td>888td>
            <td>999td>
        tr>
        <tr >
            <td>000td>
            <td>QQQtd>
        tr>
        <tr>
            <td>WWWtd>
            <td>EEEtd>
        tr>
    table>
    div>
body>
html>

中間表格中海油跨行跨列的都沒有什么問題。

4、問題:

我現在是弄好了保存成png或者是jpg的時候用win10 系統自帶的windows自帶的照片查看器看著會模糊不知道是我個人電腦的問題還是都是這個問題

看著就這種。

用附件中的畫畫和其他工具打開又沒有什么問題

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

GPU云服務器云服務器 html保存為圖片將語音轉化為文字的軟件 js將數據轉化為json js將數據轉化為json格式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1150.html

html5

摘要：最典型的場景就是聊天室。主要特點就是服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息，是真正的雙向平等對話，屬于服務器推送技術的一種。語義化標簽 input的新屬性值表單的驗證 json的新方法自定義屬性拖放 canvas 地理位置的獲取離線存儲本地存儲 audio video 語義化標簽使用最多的id->當前的語義化標簽頁面整體...

leiyi 2019-08-01 17:37 評論0 收藏0
前端質量監控之頁面性能相關

摘要：前言最近有幸參與一個前端質量監控類項目的重構，算是個人初次接觸到前端質量監控相關的知識，對于其中的性能統計部分很感興趣，查詢資料之后寫了文章，作為個人學習記錄，如有錯誤，敬請斧正頁面整體性能通過瀏覽器提供的方法，我們能夠得到網頁每個處理階段前言最近有幸參與一個前端質量監控類項目的重構，算是個人初次接觸到前端質量監控相關的知識，對于其中的性能統計部分很感興趣，查詢資料之后寫了文章，作...

Shihira 2019-08-23 12:56 評論0 收藏0
虛擬DOM內部是如何工作的

摘要：但是它與里大部分的概率是保持一致的。但是如何將轉換成函數的調用呢就是干這件事情的。好了，讓我們看看是如何工作的。下面的圖片在流程圖中高亮了一個組件是如何工作的最后希望這篇文章能幫助你理解是如何工作的至少在中英文原文鏈接 Virtual DOM很神奇，同時也比較復雜，難以理解。react,preact和相似的js庫都使用了virtual dom。然而，我找不到任何好的文章或者文檔，可以...

hiYoHoo 2019-08-21 11:46 評論0 收藏0
推薦輕量高效無依賴的開源JS插件和庫

摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。在這里維持一個持續更新的地方圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

AlphaWallet 2019-08-02 15:56 評論0 收藏0
推薦輕量高效無依賴的開源JS插件和庫

摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。在這里維持一個持續更新的地方圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

lushan 2019-08-30 13:09 評論0 收藏0