.net html2canvas网页截图生成图片并保存到本地

最新推荐文章于 2023-09-23 11:21:33 发布

xlb_123

最新推荐文章于 2023-09-23 11:21:33 发布

阅读量1.7k

点赞数

分类专栏： css相关 web前端开发

本文链接：https://blog.csdn.net/qq736150416/article/details/82762003

版权

本文介绍如何利用html2canvas库将网页内容转换为图片并保存到本地，针对长页面可能出现截图不全的问题，提供了解决方案。

摘要由CSDN通过智能技术生成

网页截图，并保存到本地，页面长度过长，可能会出现截图不成功的情况，这个暂时还没解决。

(1)引用jquery.js和html2canvas.js（下载地址：https://github.com/niklasvh/html2canvas/releases ，下载的版本是 v0.4.1 - 7.9.2013）

(2)html代码：



<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <link href="/content/PlugIn/icon3/iconfont.css" rel="stylesheet"/>
<link href="/content/css/templete/templete.css" rel="stylesheet"/>
<link href="/content/css/page/article.css" rel="stylesheet"/>

</head>
<body id="activity-detail" class="zh_CN sougou_body">
    <div id="js_article" class="rich_media">
        <div class="rich_media_inner">
            <div id="page-content">
                <div id="img-content" class="rich_media_area_primary">
                    <div class="targetDom" id="targetDom">
                        <h2 class="rich_media_title" id="js_title"></h2>
                        <div class="rich_media_meta_list">
                            <em id="post-date" class="rich_media_meta rich_media_meta_text"></em>
                            <a class="rich_media_meta rich_media_meta_link rich_media_meta_nickname" href="javascript:void(0);"
                               id="post-time"></a>
                        </div>
                        <div class="targetDomContent" id="targetDomContent">
                            <div class="rich_media_content " id="js_content">
                            </div>
                        </div>

                        <p><br></p>
                    </div>
                    <div class="rich_media_tool">
                        原文链接：
                        <input style="height:30px;width:96%" id="ContentSourceUrl" type="text" value="" readonly="readonly">
                    </div>
                </div>
            </div>
        </div>
    </div>


                                    <button type="button" class="exp u-btn u-btn-primary u-btn-small generateimg">
                                        <span>生成长图</span>
                                    </button>
                               

    <!-- 回到顶部 -->
    <div class="toTop">
        <i class="icon iconfont icon-iconfont-yoyo-15"></i>
    </div>

    <!-- 生成弹窗 -->
    <div class="Popup popup_genrate" style="display:none;">
        <div class="mask"></div>
        <div class="messageBox sendMessagePopup">
            <div class="modal-head">
                <p class="title">生成长图</p>
            </div>

            <div class="modal-body">
                <div class="modal-sendMess modal-templateList ">
                    <ul>
                        <li>
                            <label for=""><i class="icon iconfont icon-yuandianxiao"></i>生成选项设置：</label>
                            <div>
                                <p class="contains-title">
                                    <input type="checkbox" name="IsContainsTitle" id="IsContainsTitle">包含文章标题等相关信息
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="modal-footer">
                <button class="canclebtn">取消</button>
                <button class="surebtn" id="btnGenerate">生成长图</button>
            </div>
        </div>
    </div>

    <div class="Popup popup_img" style="display:none;">
        <div class="mask"></div>
        <div class="messageBox sendMessagePopup">
            <div class="modal-head">
                <p class="title">生成长图</p>
            </div>

            <div class="modal-body" style="height:390px; overflow-y:scroll;">
                <img src="" id="generateImg" style="width:100%;" />
            </div>

            <div class="modal-footer">
                <button class="canclebtn">取消</button>
                <button class="surebtn" id="btnDownImg">下载图片</button>
                <br />
                <span class="tips_save">注：如图片下载失败，可手动鼠标右键“图片另存为”</span>
            </div>
        </div>
    </div>

    <div style="width:500px; margin-top:20px;display:none;">
        <img id="screenShotImg" src="" crossorigin="Anonymous">
    </div>
    <a id="tttt"></a>
</body>
</html>
<script src="/content/plugIn/jquery-1.9.1.min.js"></script>
<script src="/content/plugIn/layer/layer/layer.js"></script><!--该js是弹窗js-->
<script src="/content/plugin/html2canvas.js"></script>

<script type="text/javascript">
    $(function () {
        $(".generateimg").click(function () {
            $(".popup_genrate").show();
        });
        $(".popup_genrate .canclebtn").click(function () {
            $(".popup_genrate").hide();
        });
        $(".popup_img .canclebtn").click(function () {
            $(".popup_img").hide();
        });
    })

        $(".contains-title").click(function () {
        if

最低0.47元/天解锁文章

xlb_123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
.net html2canvas网页截图生成图片并保存到本地

网页截图，并保存到本地，页面长度过长，可能会出现截图不成功的情况，这个暂时还没解决。(1)引用jquery.js和html2canvas.js（下载地址：https://github.com/niklasvh/html2canvas/releases ，下载的版本是v0.4.1 - 7.9.2013）(2)html代码：&lt;!DOCTYPE html&gt;&lt;html...
复制链接

扫一扫