利用html2canvas截取div保存为png图片并下载

Html2canvas是什么?

是一个脚本这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。

运行过程?

脚本遍历加载页面的DOM。它收集那里所有元素的信息，然后将其用于构建页面的表示形式。换句话说，它实际上并不截取页面的屏幕快照，而是根据它从DOM读取的属性来构建页面的表示形式。所以可能有些这个脚本识别不了的css或者html将会在编译过程中失效!

局限性

脚本使用的所有图像都必须位于相同的来源，以便它无需代理即可读取它们。同样，如果canvas 页面上还有其他元素被跨域内容污染，它们将变脏并且无法被html2canvas读取。
该脚本不会呈现Flash或Java applet之类的插件内容。

安装

npm i html2canvas

导入

import html2canvas from 'html2canvas'

用法

html

<buttonclass="restore-btn"@click="saveImage('html2canvas', '图片名称')"
>下载图片</button>
<div id="html2canvas" ref="html2canvas">
截取内容
</div>

//图片格式转换方法dataURLToBlob(dataurl) {let arr = dataurl.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},//点击方法saveImage(divText, imgText) {let canvasID = this.$refs[divText];let that = this;let a = document.createElement('a');html2canvas(canvasID).then(canvas => {let dom = document.body.appendChild(canvas);dom.style.display = 'none';a.style.display = 'none';document.body.removeChild(dom);let blob = that.dataURLToBlob(dom.toDataURL('image/png'));a.setAttribute('href', URL.createObjectURL(blob));//这块是保存图片操作  可以设置保存的图片的信息a.setAttribute('download', imgText + '.png');document.body.appendChild(a);a.click();URL.revokeObjectURL(blob);document.body.removeChild(a);});},

关于网络图片截取不了是因为跨域,上面说过脚本使用的所有图像都必须位于相同的来源,这里我们只需要给图片上增加一个属性crossOrigin="Anonymous"，以及对应后台做跨域处理就行了

html2canvas参数

名称	默认	描述
async	true	是否异步解析和呈现元素
allowTaint	false	是否允许跨原始图像污染画布
backgroundColor	#ffffff	画布背景颜色，如果在DOM中未指定，设置 null 为透明

canvas	null	现有画布元素用作绘图的基础
foreignObjectRendering	false	是否在浏览器支持的情况下使用ForeignObject渲染持
imageTimeout	15000	加载图像的超时（以毫秒为单位，设置 0 为禁用超时
ignoreElements	(element)=>false	谓词函数，用于从渲染中删除匹配元素
logging	true	启用日志记录以进行调试
onclone		在克隆文档进行渲染时调用的回调函数可用于修改将在不影响原始源文档的情况下呈现的内容。
proxy	null	Url到代理，用于加载跨源图像。如果留空，则不会加载跨原始图像。
removeContainer	true	是否要清理克隆的DOM元素html2canvas会暂时创建
scale	window.devicePixelRatio	用于渲染的比例，默认为浏览器设备像素比率
useCORS	false	用来设置是否允许使用跨域的图片进行访问
width	element width	canvas的宽度
height	element height	canvas高度设定
x	element x-offset	裁剪画布x坐标
y	element y-offset	裁剪画布y坐标
scrollX	element scrollX	渲染元素时使用的x滚动位置（例如，如果Element使用 position: fixed ）
scrollY	element scrollY	渲染元素时使用的y滚动位置（例如，如果Element使用 position: fixed ）
windowWidth	Window.innerWidth	渲染元素时使用的窗口宽度，这可能会影响媒体查询之类的东西
windowHeight	Window.innerHeght	染时使用的窗口高度 Element ，这可能会影响媒体查询等内容
taintTest	true	在渲染前测试图片

利用html2canvas截取div保存为png图片并下载相关推荐

vue使用html2canvas截取div内容生成海报~ vue生成海报
最近项目有需求需要把生成海报.就在网上查了一些资源记录一下. 首先就是下载依赖了.老规矩: npm i html2canvas 然后在需要的组件里面引用: import html2canvas fro ...
html2canvas源码修改,html2canvas把div保存高清图的方法代码
http://www.bootcdn.cn/(可以搜索html2canvans) 1.选择html2canvas版本(这个版本可以放大倍数保证图片清晰) 默认生成的canvas图片在retina设备上 ...
利用PR将视频保存成一系列图片
1.打开Pr,新建工程,文件>导入选择视频文件. 2. 文件>导出>媒体(或者ctrl+M). 3.在导出设置里选择导出格式(JPEG或其他),在视频>基本设置里选择图片大 ...
图像处理软件--利用PR将视频保存成一系列图片
1.打开Pr,新建工程,文件>导入选择视频文件. 2.文件>导出>媒体(或者ctrl+M). 3.在导出设置里选择导出格式(JPEG或其他),在视频>基本设置里选择图片大小及 ...
利用ClaudiaIDE插件在VS中插入图片
利用ClaudiaIDE插件在VS中插入图片效果图下载设置插件效果图下载 github链接找到相应的版本如下图所示我下了个2019的链接: 百度网盘提取码:5xi8 设置插件打开VS中 ...
【FFmpeg】java实现利用ffmpeg视频上传转码同时截取一帧保存为同名图片，并获取视频分辨率
〇.前情提要完成了视频上传,接下来是给上传的视频保存一张同名的jpg文件在同样文件夹中,并且获取到视频的分辨率. macOS Catalina 10.15.1 ffmpeg version 4.3. ...
H5页面使用html2canvas实现div生成为图片，保存到手机
在做微信公众号H5页面时,需求要求html页面生成base64图片,并保存到手机相册中.之前没做过,在网上搜了相关的资料.了解到了html2canvas.js. html2canvas首先将页面生成c ...
使用 html2canvas 将页面保存成图片
有时我们需要实现在浏览器端直接对整个或部分页面进行截屏,比如移动端常见的"长按网页保存为图片"功能.这个借助 html2canvas 这个第三方 js 库即可实现,下面通过样例演示 ...
Python利用bs4批量抓取网页图片并下载保存至本地
Python利用bs4批量抓取网页图片并下载保存至本地使用bs4抓取网页图片,bs4解析比较简单,需要预先了解一些html知识,bs4的逻辑简单,编写难度较低.本例以抓取某壁纸网站中的壁纸为例.(b ...

利用html2canvas截取div保存为png图片并下载

html2canvas参数

利用html2canvas截取div保存为png图片并下载相关推荐

最新文章

热门文章