html2canvas 截页面高清长图_html2canvas截长图-程序员宅基地

技术标签： html5  js  html  javascript  

由于业务需求截取当前界面的长图 保存到相册 找了一圈发现前端 html2canvas 可以实现该功能以下是代码和操作步骤 

html2convas cdn <script src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

废话不多说直接上代码

//核心代码
function cutWebToPic() {
        window.pageYoffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0; //点击时导航栏 滚动条提升到顶部。

        $(".createImagBtn").hide(); //生成画报的按钮隐藏
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        var scale = 4; //放大比例
        canvas.width = $(window).width() * scale; //画布宽度 /屏幕宽度
        canvas.height = 1024 * scale; //画布高度 / dom高度
        canvas.getContext("2d").scale(scale, scale);
        $("#pic3").prop("src", '/static/game/funvjie/image/load.gif')
        var opts = {
            dpi: window.devicePixelRatio * 4, //画质dpi
            scale: scale, // 添加的scale 参数
            canvas: canvas, //自定义 canvas
            // logging: true, //日志开关，便于查看html2canvas的内部执行流程
            width: $(window).width(), //dom 原始宽度
            height: 1024,
            useCORS: true // 【重要】开启跨域配置
        };
        html2canvas(document.querySelector("#main"), opts).then(canvas => { //选取dom
            setTimeout(() => {
                $("#pic3").prop("src", canvas.toDataURL())
            }, 2000);
            $(".mark-box").show(); //遮罩
            $(".createImagBtn").show();  //生成完结束 按钮显示
        });
    }

 一开始试了好几次  截图效果都不是很明显比较糊，后来找了一些资料 东拼西凑的 写下了这段代码。虽然我不会写 但是我能看懂会调用  嘿嘿我是属于ctrl+c 和ctrl+v 的程序员

逻辑是 js 生成canvas画布 按照PC/移动端的 宽，和dom元素的高度来进行对画布的设置，然后html2canvas 配置选项opts->选取dom区域元素 然后放入参数调用  差不多就这样 代码都有体现

html2canvas 有个坑  如果截图的时候不把滚动条设为0（页面没滚动还好）如果滚了一半就只会截图出你当前窗体看到的半张图。我不知道这个算不算坑，反正我是点击生成按钮先把滚动条 搞到0 然后再开始调用插件

 canvas.toDataURL()  这个是出来的 base64位字符串信息  

就拿测试过高清图片的当效果吧。 马赛克是微信截图加上去的，不是生成时有的，就将就着看吧 反正是算比较看的清楚的（PS：页面丑不丑的别喷我，不是我设计的，我只是负责把页面按照设计图做出来，也不是专业的前端，我是搞后端的！！！！！~~~~~坑爹单位）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35866780/article/details/114150343

智能推荐

学习笔记：RSA加解密公式及算法描述_密文是模质数的余数-程序员宅基地

文章浏览阅读2.8k次。首先，要了解3个问题：1、什么是“素数”？　　素数是这样的整数，它除了能表示为它自己和1的乘积以外，不能表示为任何其它两个整数的乘积。例如，15＝3＊5，所以15不是素数；又如，12＝6＊2＝4＊3，所以12也不是素数。另一方面，13除了等于13＊1以外，不能表示为其它任何两个整数的乘积，所以13是一个素数。素数也称为“质数”。2、什么是“互质数”（或“互素数”）？　　小学数学教材对互..._密文是模质数的余数

四元数与欧拉角的转换与使用matlab的simulink搭建实现_simulink四元数转欧拉角-程序员宅基地

文章浏览阅读5.8k次，点赞3次，收藏30次。定义分别为绕Z轴、Y轴、X轴的旋转角度，分别为Yaw、Pitch、Roll。四元数的定义通过旋转轴和绕该轴旋转的角度可以构造一个四元数：其中是绕旋转轴旋转的角度，为旋转轴在x,y,z方向的分量（由此确定了旋转轴）。欧拉角到四元数的转换四元数到欧拉角的转换在matlab中simulink搭建如下：Eul2Quat内部如下：输出值为[1;1;1]值时，输出图形如下：..._simulink四元数转欧拉角

PCB上10A的电流需要走多宽的线？需要几个过孔？-程序员宅基地

文章浏览阅读3.3k次。关注+星标公众号，不错过精彩内容转自 |记得诚电子设计还记得上大学时，参加飞思卡尔智能车比赛，做的一块板子，因为电源走线过细，导致一上电线直接烧断了，只能外部飞线代替。上班了，公司的P..._10a pcb线宽

电脑连接手机热点后无法上网或提示找不到服务器IP地址（DNS错误）_笔记本开热点后dns域名错误怎么解决-程序员宅基地

文章浏览阅读1w次，点赞3次，收藏10次。电脑连接手机热点后无法上网或提示找不到服务器ip地址（DNS错误）自己电脑连接上自己手机热点后，但是不能上网。自己电脑连接其他Wi-Fi或者自己手机热点给其他手机电脑连接都可上网解决方法：将手机还原网络设置给电脑连接上手机热点点击电脑开始菜单—控制面板—网络和Internet—网络和共享中心—点击更改适配器设置之后页面选择目前连接的无线网络连接右键属性双击Internet协议版本..._笔记本开热点后dns域名错误怎么解决

模拟使用map进行学生信息（学号、姓名、性别、年龄、专业）存储，key值是学生的学号，value值是对应学生的信息，要求此map中保存的数据根据学号自动升序排序。_可以在mapper类中编写例如:在一张学生信息表中,有姓名,学号,年龄,性别,院系,专业,-程序员宅基地

文章浏览阅读2.2k次。模拟使用map进行学生信息（学号、姓名、性别、年龄、专业）存储，key值是学生的学号，value值是对应学生的信息，要求此map中保存的数据根据学号自动升序排序。package com.zut.Nove;import java.util.*;public class MapStudent {int no;String name;String sex;int age;String profession;public MapStudent(int no, String name, Strin_可以在mapper类中编写例如:在一张学生信息表中,有姓名,学号,年龄,性别,院系,专业,

样本T检验、方差分析（ANOVA）、wilcoxon秩和检验、KW秩和检验详解和操作步骤_kw检验和wilcoxion秩和检验的区别-程序员宅基地

文章浏览阅读1.7w次，点赞10次，收藏59次。阅读期刊文献时，各种统计检验（T检验、wilcoxon秩和检验、方差分析…）方法让人眼花缭乱，分不清它们之间的区别；当处理自己数据时，又面临着不知道如何挑选合适的检验方法，学习操作那些复杂的生信软件等等挑战。各类统计检验究竟有何差别，该如何选择？有没有快速便捷的工具可以实现数据的统计检验？我们为大家解答这两个问题。对于一项研究成果数据上的评判，我们需要用一个明确、客观的指标加以说明，这就是统..._kw检验和wilcoxion秩和检验的区别

随便推点

阿里云技术专家入选Apache Member;百度Q1财报：营收241亿元;华为面向全球发布AI-Native数据库……...-程序员宅基地

文章浏览阅读224次。戳蓝字“CSDN云计算”关注我们哦！嗨，大家好，重磅君带来的【云重磅】特别栏目，如期而至，每周二第一时间为大家带来重磅新闻。把握技术风向标，了解行业应用与实践，就交给我重..._华为分布式数据库营收

若依vue下拉框取字典表值回显为数字不是文字_若依字典回显-程序员宅基地

文章浏览阅读5.5k次，点赞15次，收藏17次。作为一个前端小白，今天遇到一个vue下拉框回显问题，可以看到回显为数字，而不是对应的文字，就很纠结。然后通过网上查询加上自己尝试发现，因为自己是取字典表数据下拉，字典表里面是string类型，而我自己将字段定义为int类型，导致出现此类问题。有两种方式解决：1.将实体里面定义的那个字段改为string型。2.将value的值用Number包起来，即<el-option v-for="dict in statusOptions" :_若依字典回显

Li‘s 核磁共振影像数据处理-9-3D Slicer实现纤维追踪（大脑纤维束成像）_3dslicer 纤维束-程序员宅基地

文章浏览阅读817次。讲解视频内容请移步Bilibili：https://space.bilibili.com/542601735入群讨论请加v hochzeitstorte请注明“核磁共振学习”3D Slicer实现纤维追踪（大脑纤维束成像）1、选择模块Tractography Seeding2、参数选择Parmeters Node（参数节点）：Parameters（参数）：选择现有设置或创建一个新的设置。Presets（预设）：Slicer4 Interactive Seeding Defaults._3dslicer 纤维束

新型计算机想象作文,精选科技想象作文3篇-程序员宅基地

文章浏览阅读213次。精选科技想象作文3篇在学习、工作、生活中，大家都跟作文打过交道吧，作文是一种言语活动，具有高度的综合性和创造性。为了让您在写作文时更加简单方便，下面是小编为大家收集的科技想象作文3篇，希望能够帮助到大家。科技想象作文 篇1今天我为大家讲述未来的科技，在未来有一位博士，他发明了超级飞车。车上装着五个超级马达，可以用一秒跑上千公里，是一个光速飞车。它上面还装有二十颗烟雾弹，不会伤人，还有助于逃跑。还装..._对计算机展开想象写一篇作文

16位或8位单通道图像直方图均衡化算法原理与实现_16位单通道图-程序员宅基地

文章浏览阅读2.2k次。文章目录直方图均衡化的介绍直方图均衡化原理手工实现直方图均衡化理论知识来源：直方图均衡化算法原理与实现直方图均衡化16位或者8位直方图实现代码：直方图均衡（支持单通道16位和8位图像）.rar直方图均衡化的介绍直方图均衡化是一种简单有效的图像增强技术，通过改变图像的直方图来改变图像中各像素的灰度，主要用于增强动态范围偏小的图像的对比度。原始图像由于其灰度分布可能集中在较窄的区间，造成图像不够清晰。例如，过曝光图像的灰度级集中在高亮度范围内，而曝光不足将使图像灰度级集中在低亮度范围内。_16位单通道图

MAC Android Studio使用无线调试_macos android 无线调试-程序员宅基地

文章浏览阅读2.6k次，点赞2次，收藏2次。安装无线调试插件目前有好几款插件可以使用，我这使用：WIFI ADB ULTIMATE打开Android Studio插件所在位置：Android Studio/Preferences/Plugins打开后发现插件的网络一直连接不上：找到:Appearance & Behavior/System Settings/Updates取消勾选：Use secure conne..._macos android 无线调试

推荐文章

热门文章

相关标签