html2canvas学习

官网：http://html2canvas.hertzen.com/

第一步：安装

使用npm安装
```
npm install html2canvas --save
```
使用yarn安装
```
yarn add html2canvas
```

第二步：引入

import html2canvas from 'html2canvas'

第三步：使用

canvasToImg(){let that = this// 获取相应的canvasdom元素（id、class、tag）const dom = document.getElementById('idName')html2canvas(dom , {// 参数说明backgroundColor: null,userCORS: true,windowWidth: dom.scrollWidth,windowHeight: dom.scrollHeight}).then( canvas => {// 设置生成的图片格式let dataURL = canvas.toDataURL('image/png')console.log(dataURL)}).catch(err => {console.log(err)})
}

第四步：参数说明
名称默认值描述
allowTaint false 是否允许跨源图像污染画布
backgroundColor #ffffff 画布背景颜色，如果没有在 dom 中指定。设置空为透明
canvas null 现有的 canvas 元素作为绘图的基础
foreignObjectRendering   false 是否使用外部的样式渲染，如果浏览器支持它
imageTimeout 15000 加载图像的超时(以毫秒为单位)。设置为0以禁用超时。
ignoreElements (element) => false   该函数从呈现中移除匹配元素
logging   true   为调试目的启用日志
onclone   null   当文档被克隆以便呈现时调用的 callback 函数，可用于修改将要呈现的内容，而不影响原始源文档
proxy   null   Url 的代理，这是用来加载跨原的图像。
removeContainer   true   是否清除 html2canvas 临时创建的克隆 dom 元素
scale   window.devicePixelRatio   用于渲染的比例。默认为浏览器设备像素比例。
useCORS   false   是否尝试使用 cors 从服务器加载图像
width   width   画布的宽度
height   height   画布的高度
x   x-offset   画布的横向坐标
y   y-offset   画布的纵向坐标
scrollX   scrollX
scrollY   scrollY
windowWidth   Window.innerWidth   渲染元素的窗口宽度
windowHeight   Window.innerHeight   渲染元素的窗口高度

注：有些样式不支持，比如margin，所以取dom时尽量取最里程元素。

比如这张图片，我们就取红框元素所在dom。

vue项目使用html2canvas 元素生成图片相关推荐

vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图
功能: 1.兼容 PC 和 Mobile: 2.对指定的区域进行截取: 3.可以控制截图大小: 4.截图生成base64图片地址一.安装插件 npm install html2canvas --sa ...
【Vue 项目】html2canvas + jspdf 实现将页面内容生成 PDF 及相关问题解决方案（页面被分页分割问题、html2canvas生成图片只有一半）
由于在自己的工作和学习过程中,只查看某个大佬的教程或文章无法满足自己的学习需求和解决遇到的问题,所以自己在追赶大佬们步伐的基础上,又自己总结.整理.汇总了一些资料,方便自己理解和后续回顾,同时也希望给 ...
在vue项目中操作元素ref案例；
原博主链接 <!--* @Description:会动的词云* @Author: Vergil* @Date: 2021-08-25 14:17:45* @LastEditTime: 2021- ...
html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
解决vue项目中@mousemove 事件子元素触发了父元素事件
在Vue项目中使用@mousemove事件从$event中获取x与y轴时 , 如果绑定此事件的元素内还有别的子元素那么同样会触发mousemove事件 , 但是$event.target会是这个子元素 ...
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一.需求问题在之前的项目开发中,使用了swiper插件.由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏与显示.只有当点击进行一些操作以后,swiper的轮播图才会 ...
vue 项目 html2canvas,JSZip,FileSaver 下载图片
将html里面的dom转化为图片 <template><div class="m-item" ref="imageTofile">... ...

vue项目使用html2canvas 元素生成图片

注：有些样式不支持，比如margin，所以取dom时尽量取最里程元素。

vue项目使用html2canvas 元素生成图片相关推荐

最新文章

热门文章