利用canvas将网页元素生成图片并保存在本地
利用canvas将网页元素生成图片并保存在本地
首先引入三个文件:
1、<script type="text/javascript" src="js/html2canvas.js"></script>
2、<script type="text/javascript" src="js/base64.js"></script>
3、<script type="text/javascript" src="js/canvas2image.js"></script>
<div id="view" style="background-color: red; width: 700px; height: 500px;">
//canvas截图为document.body上的元素
html2canvas(document.body).then(function (canvas) {
canvas.setAttribute('id','canvasImg'); //给canvas添加id
// document.body.appendChild(canvas)
document.getElementById('images').appendChild(canvas) //添加canvas图给元素
});
let Download=document.getElementById('Download');
Download.onclick=function () { //给下载节点绑定事件
let oCanvas=document.getElementById('canvasImg'); //获取canvas的id
console.log(oCanvas)
// 将canvas图片通过Canvas2Image转成的img元素引入的图片
let img=Canvas2Image.saveAsJPEG(oCanvas,true).getAttribute('src');
console.log(img);
saveFile(img,'hlr.png') //调用下载函数,传Canvas2Image图片地址,下载时保存的图片的名称
};
> 注:createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name)
> createElementNS() 方法与 createElement() 方法相似,只是它创建的 Element
> 节点除了具有指定的名称外,
> 还具有指定的命名空间。只有使用命名空间的 XML 文档才会使用该方法。
let saveFile=function (data,filename) {
let save_link=document.createElementNS('http://www.w3.org/1999/xhtml','a'); //img表示生成img元素或a元素或则可以放图片地址的元素 save_link.href=data; //img 元素中图片引入用src,a元素中图片的引入用href等等
save_link.download=filename; // 下载的名称
var event = document.createEvent('MouseEvents');//创建event事件
console.log(event);
//initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值, 详见下文:
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event); console.log(save_link)// <a href=data:image/jpeg:base64.....></a>
}
> initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值。
> 此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前调用,
> 尽管在该阶段可以多次调用它(如有必要)。如果被多次调用,则最后一次调用优先。
- 其他指定事件方法:
typeArg - 指定事件类型。
canBubbleArg - 指定该事件是否可以 bubble。
cancelableArg - 指定是否可以阻止事件的默认操作
viewArg - 指定 Event 的 AbstractView。
detailArg - 指定 Event 的鼠标单击量。
screenXArg - 指定 Event 的屏幕 x 坐标
screenYArg - 指定 Event 的屏幕 y 坐标
clientXArg - 指定 Event 的客户机 x 坐标
clientYArg - 指定 Event 的客户机 y 坐标
ctrlKeyArg - 指定是否在 Event 期间按下 control 键
altKeyArg - 指定是否在 Event 期间按下 alt 键。
shiftKeyArg - 指定是否在 Event 期间按下 shift 键。
metaKeyArg - 指定是否在 Event 期间按下 meta 键。
buttonArg - 指定 Event 的鼠标按键。
relatedTargetArg - 指定 Event 的相关 EventTarget。

**更多内容自己去查看canvas API.**
来源:看了一篇博客,实验出来的,忘了地址了,哈哈
利用canvas将网页元素生成图片并保存在本地的更多相关文章
- php获取网页中图片并保存到本地
php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: save_img("http://www.jbxue.com" ?>
- php获取网页中图片并保存到本地的代码
php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: <?php /** * 获取网页中图片,并保存至本地 * by www.jbxue.com */ header(" ...
- Python3.4 获取百度网页源码并保存在本地文件中
最近学习python 版本 3.4 抓取网页源码并且保存在本地文件中 import urllib.request url='http://www.baidu.com' #上面的url一定要写明确,如果 ...
- python抓取网页中图片并保存到本地
#-*-coding:utf-8-*- import os import uuid import urllib2 import cookielib '''获取文件后缀名''' def get_file ...
- python3 利用正则获取网页中的想保存下来的内容
需要获取某个网页中表格部分中某个产品的成份 分析在html中成份的元素代码 <a href="/composition/4c3060178d1184935a48c4e51be4f63f ...
- 用html5的canvas生成图片并保存到本地
原文:http://www.2cto.com/kf/201209/156169.html 前端的代码: [javascript] function drawArrow(angle) { ...
- canvas生成图片并保存到本地文件夹主要代码
js var url = canvas.toDataURL();//把canvas中的图片变成data:image C# string filepath = ""; string ...
- vue使用html2canvas生成图片并保存到本地
html2canvas官方文档 http://html2canvas.hertzen.com/ npm下载依赖 npm install html2canvas -S 在需要使用的地方引入 import ...
- html生成图片并保存到本地方法(Windows)
// 最近用到一个保存html为图片到本地的功能(保存到下载目录),记之,该功能IE使用Blob 存储数据,关于兼容性问题参见如下表格,其他浏览器使用a标签download属性新功能下载 Browse ...
随机推荐
- Android Studio 使用Intent实现页面的跳转(带参数)
不管是在APP,还是在网站中,页面之间的跳转都是很常见的,本文主要讲一下在APP中,如何通过Intent实现页面的跳转. 不带参数: 写在MainActivity页面的代码: Intent inten ...
- 多张报表导出到一个多sheet页excel
业务需求: 通过勾选不同的报表名称,然后直接执行导出excel.并且这些报表需要统一导入到一个excel的多个sheet页中,并且对某些报表可能需要增加一些类似'已审核'之类的图片(展现时并没有 ...
- 报表使用hive数据源报java.net.SocketTimeoutException: Read timed out
数据库表的数据量大概50W左右,在报表设计器下创建了hive的数据源,连接正常,由于数据量比较大,就用了润乾报表的大数据报表功能,报表设置好后,发布到页面中报错: 数据集ds1中,SQL语句SELEC ...
- Mac下驱动BCM20702A0 USB蓝牙
偶然高了一个USB蓝牙,查到Mac下能识别,无法驱动,就去找了一下.方法很简单,就是把蓝牙的PID和VID加入到驱动里边去,具体方法和步骤如下: 1. 进入到/System/Libary/Extens ...
- 软工读书笔记 week 9 ——《构建之法》
软工读书笔记 week 9 ——<构建之法> 最近的三周我们正式开始我们的项目.然后我也把<构建之法>中的相关章节再拿出来读了一番.以下是一些 ...
- PHP获取当前页面的URL地址
本文出至:新太潮流网络博客 //获取域名或主机地址 blog.iinu.com.cn echo $_SERVER['HTTP_HOST']."<br>"; //获取网页 ...
- 将mongodb设置为windows服务
[转载] [转载]安装mongodb以及设置为windows服务 详细步骤 将mongodb设置成windows服务,这样就不用使用命令启动了,设置方法如下: 1.在data文件夹下新建一个log文件 ...
- Oracle 补丁那些事儿(PS、PSU、CPU、SPU、BP、DBBP…)
当前ORACLE数据库提供两种方式的补丁一种是主动的Proactive Patches和另一种被动的Reactive Patches,其中Reactive Patches是指过去的ONE-OFF Pa ...
- [沫沫金]JavaWeb企业信息系统,增加操作记录、数据库记录
背景 系统出现数据莫名丢失,业务人员的反馈无法复现问题.纠结了很久,最终老板发话要记录操作,通过日志进行分析重现 环境 SSH框架 目标 1.记录访问了那个方法,使用的参数及返回的内容 2.记录新增. ...
- linux中ftp提示--553 Could not create file
今天在阿里云的linux上搭建ftp服务的时候,搭建成功之后,上传文件时总提示553 Could not create file,找了半天原因,终于解决了 ftp主目录为/home/myftp /ho ...