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

番茄西红柿发布于2019-04-23 11:47 / 2444人阅读

摘要：由于客户的需求，将写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯一开始使用的是。功能是可以实现，但是有缺陷。用附件中的画画和其他工具打开又没有什么问题下了班等下回去家里的电脑看看

由于客户的需求，将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格式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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