html2canvas将Html5转换为图片并下载到本地,纯JS实现

2023-11-04

首先引入html2canvas.js

<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

然后是文件本地保存并重命名的一段函数,最后事件函数处理就可以了

/**
             * 在本地进行文件保存
             * @param  {String} data     要保存到本地的图片数据
             * @param  {String} filename 文件名
             */
            var saveFile = function(data, filename){
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;

                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            };
function exportToPic() {        
                html2canvas(
                    document.body,
                    {
                        onrendered: function (canvas) {                         
                            var pageData = canvas.toDataURL('image/jpeg', 1.0);

							console.log(pageData)
                            //window.location=(pageData.replace("image/jpeg", "image/octet-stream"));
							saveFile(pageData.replace("image/jpeg", "image/octet-stream"),new Date().getTime()+".jpeg");
                            
                    })
            }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html2canvas将Html5转换为图片并下载到本地,纯JS实现 的相关文章

  • 实现快速 Javascript 搜索?

    基本上 我有一个带有文本框的页面和 ul 列在其下面 这 ul 由用户的朋友列表填充 用户开始在文本框中输入朋友的名字 例如按 r 我想立即更新 ul 每次按键仅显示名字以 R 开头的朋友 例如 Richard Redmond Raheem
  • 计算字符串中的唯一单词

    下面我尝试将字符串数组提供给一个函数 该函数将唯一单词添加到单词数组中 并且如果该单词已经在数组中 则增加计数数组中相应元素的计数 var words var counts calculate a b calculate a c funct
  • Grunt-browserify+mapify+coffeescript = 未通过相对路径找到模块

    我尝试让 grunt browserify 使用 Coffeescript 的相对路径 但当我尝试构建源代码时总是收到错误消息 gt gt Error module src app utils includeMixin not found
  • 不使用 PHP 提交联系表单

    我还是一名学生 今天我们的讲师告诉我们 无需使用 mailto 函数即可提交联系我们表单的唯一方法是使用 PHP 我发誓去年另一位讲师向我们展示了一种仅使用 javascript 的方法 是否可以使用基本表单和 javascript 提交反
  • 当标题中包含“&”时,电子邮件标题无法正确显示,如何在 JavaScript 中修复?

    我有一些代码以以下格式显示文章标题列表 简短描述和作者姓名 标题 作者姓名 描述 作者的姓名和描述与此处无关 因为它们始终显示正确 大多数标题也可以正确显示 以下是一些虚构的示例 关于银行业务您需要了解的最重要的一件事 作者姓名 正确显示
  • 带有闭包的 JavaScript 性能

    var name function n var digits one two three four return digits n var namenew function digits one two three four return
  • Amazon Lex 和 BotFramework 集成 TypeError:无法对已在响应中撤销的代理执行“get”[重复]

    这个问题在这里已经有答案了 我正在进行概念验证 尝试将 BotFramework 与 Amazon lex 集成 并最终将机器人集成到 Microsoft 团队渠道 AWS SDK 用于调用 Amazon Lex 自动程序 async ca
  • Excel 宏与 Javascript

    我希望使用 Javascript 中的宏而不是默认的 VBA 来操作 Excel 电子表格 我可以使用以下 VBA 代码执行 javascript 代码 javascript to execute Dim b As String b fun
  • 无法在 IE 中的选择选项上使用 onmouseover 事件

    更新的代码 function getElements var x document getElementsByTagName option var el document getElementById selectDept el onmou
  • 是否可以进行条件解构或有后备?

    我有一个具有许多深层嵌套属性的对象 我希望能够访问 MY KEY 上的属性 如下 但如果该属性不存在 则获取 MY OTHER KEY 我怎样才能做到这一点 const X Y MY KEY Values segments segment
  • 将事件添加到 Google Maps API InfoWindow 内的元素

    我想在 Google Maps API v3 InfoWindow 内放置一个带有输入字段和提交按钮的表单 提交后 我想调用一个函数 该函数使用输入字段中输入的地址启动方向服务 这是我的代码 我目前只测试方向事件是否被触发 我已经编写了完整
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 在移动网站中处理 iPhone 事件(如向左滑动)

    iPhone 浏览器是否有可以使用 Javascript 挂钩的特殊事件 例如 如果用户向左滑动 我想执行某个操作 如果有类似的活动 很高兴看到所有这些活动的参考 理想情况下 有一天所有触摸屏移动浏览器都会有一个标准 您可以访问多点触控事件
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • Facebook API Javascript JSON 响应

    function getUser FB api me function response console log Response is response alert Your name is response first name ale
  • Babel/RequireJS + typeof“RangeError:超出最大调用堆栈大小”

    我有一个非常基本的 JS 错误 我很羞愧无法解决它 我正在使用 ES6 和 Babel 进行开发 并且正在做一些实验 请注意 我在 Babel 中使用了这些参数 presets es2015 plugins transform es2015
  • 动态 dom 操作后,如何在浏览器历史记录中保留 dom 状态?

    是否有一个通用的解决方案来保留 dom 状态 以便当用户使用后退 前进返回页面时 整个页面处于他们离开时的确切状态 这篇文章询问并回答了为什么不同浏览器和不同 javascript 库的行为不一致 Ajax 后退按钮和 DOM 更新 htt
  • 使用 javascript/jquery 从数据库格式化日期的正确方法

    我正在调用包含日期时间数据类型的数据库 日期看起来像这样 2005 05 23 16 06 00 000 当用户从列表中选择某个项目时 我想在表格中显示它 我调用我的控制器操作并返回所有时间的 Json 并将它们放入表中 问题是日期完全错误
  • JsGrid 将嵌套对象加载到表中

    我正在 Django 中开发一个 Web 项目并使用 jsGrid 我遇到了问题并且找不到解决方案 我有一个嵌套的 JSON 数据 它是通过组合多个数据库表记录创建的 这是我的 JSON count 3 results personnel
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo

随机推荐

  • 关于PHP发送邮箱验证码功能介绍

    关于PHP发送邮箱验证码功能介绍 PHP语言发送邮箱验证码 可以使用PHPMailer这个现成的类文件 完美集成实现邮箱发送验证码 前期准备 a PHPMailer下载地址 在git上获取最新版即可 https github com PHP
  • vue 前端内存问题 解决方案

    前端内存问题 JavaScript heap out of memory 解决 1 全局安装increase memory limit npm install g increase memory limit 2 进入工程目录 执行 incr
  • 动态规划经典题目:最大连续子序列和、最大不连续子序列和

    1 最大连续子序列和 记数组为nums 思路 记录dp i 为i位置结尾的最大连续子序列和 则有dp i dp i 1 gt 0 dp i 1 nums i nums i 然后求dp数组的max即为最终结果 1 最大不连续子序列和 记数组为
  • java数组程序_Java数组

    7 1数组 l 数组是多个相同类型数据的组合 实现对这些数据的统一管理 l 数组中的元素可以是任何数据类型 包括基本数据类型和引用数据类型 l 数组属引用类型 数组型数据是对象 object 数组中的每个元素相当于该对象的成员变量 7 2一
  • element-ui遮罩层

    通用下载方法内 通用下载方法 export function download url params filename method downloadLoadingInstance Loading service text 正在下载数据 请
  • 7-WebApis-6

    Web APIs 6 目标 能够利用正则表达式完成小兔鲜注册页面的表单验证 具备常见的表单验证能力 正则表达式 综合案例 阶段案例 正则表达式 正则表达式 Regular Expression是一种字符串匹配的模式 规则 使用场景 例如验证
  • 启动nacos报错:Exception in thread main java.lang.UnsupportedClassVersionError

    最近在做微服务项目的时候用到nacos 使用的版本分别是最新版nacos server 2 0 2和nacos server 1 4 2 但是在启动的时候报错了先看一下报错信息吧 报错信息 G nacos server 1 4 2 naco
  • 单相并网逆变器学习记录-------------SOGI-PLL锁相环

    目录 一 锁相环的简介 二 dq坐标系 三 SOGI生成 坐标系 四 SOGI PLL 五 SOGI PLL的仿真 一 锁相环的简介 进入21世纪 随着资源 环境问题的日益加剧 以太阳能 风能和热电联产等为代表的可再生 清洁能源纷纷通过逆变
  • JetBrains Account connection error: java.security.SignatureException: Signat

    用学生账户注册登录idea时 网上看到了很多解决方式 大部分都是修改hosts文件 即删除里面的 0 0 0 0 account jetbrains com 0 0 0 0 www jetbrains com 那么问题来了 我的 hosts
  • 被勒索病毒加密的文件如何破解?

    想要硬刚勒索病毒 脱密加密的文件 是很难的 之前 我已经介绍了数字签名 勒索病毒使用了公钥加密另一个常用应用 数字信封 技术 想要恢复勒索病毒加密的文件 可以破解黑客的公钥 或者破解黑客加密文件的临时对称密钥 而这2种算法 黑客都选用了目前
  • 如何在项目中使用kafka?

    1 如何在项目中使用kafka 1 1 因为kafka的使用依赖于zookeeper https mp weixin qq com s geR3pDw Yjhmu8KMsXQosg在kafka v2 8版本后将zookeeper也集成在了服
  • 【系统篇 / 域】❀ 06. Windows10 加入域 ❀ Windows Server 2016

    简介 众所周知 Windows Server 2016 与其它版本不同的地方就是支持 Windows10 加入域服务了 修改 DNS Windows10 加入域之前 需要把网卡的DNS指向域服务器 在Windows10系统中 鼠标右击右下角
  • Elasticsearch自定义评分的多种方法

    Elasticsearch自定义评分的多种方法 在大数据领域 Elasticsearch是一个广泛使用的开源搜索和分析引擎 它提供了强大的搜索功能 并支持通过自定义评分机制来调整搜索结果的排序 在本文中 我们将探讨Elasticsearch
  • 导师总结的最全python核心知识点汇总笔记,260页最完整版。

    python学习简单 但完全掌握还是会有许多重难点 本次收集了python从入门到精通的所有重难知识点详细梳理讲解 并附有多种思路与方法 配合案例可以更快速的让你掌握相关知识节点 这份笔记由导师亲自汇总整理编辑 共计260页内容 堪称经典
  • php写layui上传接口,layui 富文本图片上传接口与普通按钮 文件上传接口的例子

    富文本 图片上传 html js 记得之前引入layui js layui use layedit function var layedit layui layedit layedit set uploadImage url url ind
  • MySQL-插入数据(insert into,replace into)

    插入数据的方法 mysql中常用的三种插入数据的语句 insert into 正常的插入数据 插入数据的时候会检查主键或者唯一索引 如果出现重复就会报错 replace into 表示插入并替换数据 若表中有primary key或者uni
  • 跨境电商----系统构建前了解

    20210529 在与国外朋友聊到跨境电商这个话题时候 思绪回到好几年前 那时候雪花纷飞 中国跨境电商刚刚高速发展时期 我记得 北京的夏天 有个穿着背心的小年轻 横穿在5 6环 中国跨境电商高速情况下 规模 产业规模 都在变化 看到C2C
  • vue双向数据绑定是如何实现的?

    Vue中的双向数据绑定主要是通过数据劫持和发布订阅模式来实现的 数据劫持 Vue通过使用Object defineProperty 方法来对data对象中的属性进行劫持 从而实现对数据的双向绑定 具体实现方式为 1 在Vue实例化时 将da
  • 网页视频下载mp4格式到本地

    发现个网页视频地址下载保存为mp4格式的资源 分享给大家 git下载地址 https gitee com tiankf mp4 CSDN下载地址 MP4下载到保存到本地资源 CSDN文库 使用方式 代码如下
  • html2canvas将Html5转换为图片并下载到本地,纯JS实现

    首先引入html2canvas js 然后是文件本地保存并重命名的一段函数 最后事件函数处理就可以了 在本地进行文件保存 param String data 要保存到本地的图片数据 param String filename 文件名 var