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

時間 2019-12-09

標籤 asp.net asp html 經過 dom image.js image 標籤 div 內容轉化圖片保存本地欄目 ASP 简体版

原文原文鏈接

因爲客戶的需求，將js寫出來的一個統計可以保存到本地。做爲碼奴的我只能慢慢搬磚咯！一開始使用的是html2canvas.js。功能是能夠實現，可是有缺陷。話很少說開始搞！javascript

一、引入幾個JS庫

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

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

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

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

三、生成圖片

3.一、生成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.二、生成下載圖片

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

我寫的是一個按鈕的安吉事件git

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();
                });

使用的額時候只要調方法就能夠了github

下面貼上Demo源碼canvas

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