八、Vue中使用 html2canvas 和 canvas2image 实现网页截屏

一、html转为canvas
1.安装 html2canvas

cnpm install html2canvas --save

2.引入 html2canvas

// 引入
import html2canvas from "html2canvas"

3.待转换内容

<div ref="lessonTableImg" class="table-container">
...
</div>

4.html转为canvas，并下载

        download () {// 获取待转换对象var downloadContent = this.$refs.lessonTableImg.....// 转换并下载html2canvas(downloadContent, opts).then((canvas) => {let dataURL = canvas.toDataURL('image/png')// 下载图片let a = document.createElement('a')document.body.appendChild(a)a.href = img.src// 设置下载标题a.download = this.lessonDto.week + "排课计划"a.click()})}

二、提高图片的清晰度

其基本原理为：
将canvas的属性width和height属性放大为2倍（或者设置为devicePixelRatio倍），最后将canvas的CSS样式width和height设置为原先1倍的大小。

例如：希望在html中实际显示的宽高分别为160px,90px则可作如下设置

<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>

具体办法：

更改百分比布局为px布局（如果原先是百分比布局的话）
关闭canvas默认的抗锯齿设置
设置模糊元素的width和height为素材原有宽高，然后通过transform: scale进行缩放。这里scale的数值由具体需求决定

在这过程中，需要用到 canvas2image 插件

1.安装 canvas2image

cnpm install canvas2image --save

2.引入 canvas2image
因为总是引入模块失败，所以我将该插件的js代码复制到本地，然后从本地引入。复制到本地时，记得在末尾加上

export default Canvas2Image;

// 引入
import Canvas2Image from '../../../utils/canvas2image'

3.改造上面的第4步：html转为canvas，并下载

        download () {var downloadContent = this.$refs.lessonTableImgvar width  = downloadContent.offsetWidthvar height  = downloadContent.offsetHeightvar canvas = document.createElement('canvas')var scale = 2canvas.width = width * 2canvas.height = height * scalecanvas.getContext('2d').scale(scale, scale)var opts = {scale: scale,canvas: canvas,// 日志开关，便于查看html2canvas的内部执行流程// logging: true,width: width,height: height,// 避免下载不全backgroundColor: null,// 【重要】开启跨域配置useCORS: true}html2canvas(downloadContent, opts).then((canvas) => {var context = canvas.getContext('2d')// 【重要】关闭抗锯齿context.mozImageSmoothingEnabled = falsecontext.webkitImageSmoothingEnabled = falsecontext.msImageSmoothingEnabled = falsecontext.imageSmoothingEnabled = falsevar img = Canvas2Image.convertToJPEG(canvas, canvas.width/2, canvas.height/2)let dataURL = img.getAttribute('src')// 下载图片let a = document.createElement('a')document.body.appendChild(a)a.href = img.src// 设置下载标题a.download = this.lessonDto.week + "排课计划"a.click()})}

完整案例如下：

<template><div><div class="searchContainer"><el-button size="mini" type="primary" @click="searchLessons">查询课表</el-button><el-button size="mini" type="danger" @click="download" v-if="tableVisible">下载课表</el-button></div><div ref="lessonTableImg" class="table-container"><el-tablev-loading="tableLoading"v-if="tableVisible":data="lessonDto.plans"stripeborder fit:header-cell-style="headerCellStyle"style="width: 100%"><el-table-column :label="lessonDto.week + '排课计划'" align="center"><el-table-column prop="period" align="center" label="时间段" style="width: 14%"></el-table-column><el-table-column align="center" :label="lessonDto.times[0]" style="width: 14%">            <template slot-scope="scope"><div v-html="scope.row.mon"></div></template></el-table-column><el-table-column align="center" :label="lessonDto.times[1]" style="width: 14%">   <template slot-scope="scope"><div v-html="scope.row.tue"></div></template></el-table-column><el-table-column align="center" :label="lessonDto.times[2]" style="width: 14%"><template slot-scope="scope"><div v-html="scope.row.wed"></div></template></el-table-column><el-table-column align="center" :label="lessonDto.times[3]" style="width: 14%"><template slot-scope="scope"><div v-html="scope.row.thurs"></div></template></el-table-column><el-table-column align="center" :label="lessonDto.times[4]" style="width: 14%"><template slot-scope="scope"><div v-html="scope.row.fri"></div></template></el-table-column><el-table-column align="center" :label="lessonDto.times[5]" style="width: 14%"><template slot-scope="scope"><div v-html="scope.row.sat"></div></template></el-table-column><el-table-column align="center" :label="lessonDto.times[6]" style="width: 14%"><template slot-scope="scope"><div v-html="scope.row.sun"></div></template></el-table-column></el-table-column></el-table></div></div>
</template>
<script>
import html2canvas from "html2canvas"
import Canvas2Image from '../../../utils/canvas2image'export default {name: 'PlanShow',data() {return {lessonDto: {},lessons: [],tableLoading: false,tableVisible: false,subjectVisible: false,teacherVisible: true}},methods: {searchLessons () {this.tableLoading = truethis.getRequestWithParams('/lesson/basic', {startTime: this.selectedDate,userId: this.userId,subjectId: this.subjectId,campusId: this.campusId}).then(resp => {this.tableLoading = false// 置空this.lessonDto = {}if (resp && resp.status == 200 && resp.data.status == 200) {var lessons = resp.data.objif (lessons instanceof Array && lessons.length > 0) {var lesson = lessons[0]this.lessons = lesson.plansvar plans = lesson.plansvar newPlans = []if (plans instanceof Array && plans.length > 0) {plans.forEach(plan => {var newPlan = {period: plan.period,mon: this.showLesson(plan.mon), tue: this.showLesson(plan.tue),  wed: this.showLesson(plan.wed),  thurs: this.showLesson(plan.thurs),  fri: this.showLesson(plan.fri),  sat: this.showLesson(plan.sat),  sun: this.showLesson(plan.sun)                                        }newPlans.push(newPlan)})}this.lessonDto = {week: lesson.week,plans: newPlans,times: this.handleTime(new Date(lesson.monday))}this.tableVisible = true} else {this.tableVisible = falsethis.$message('暂无排课计划！')}                    }})},headerCellStyle ({row, column, rowIndex, columnIndex}) {if (rowIndex === 0 && columnIndex === 0) {// 设置标题栏样式return {background: '#fff', color: '#000', 'font-size': '20px', 'font-weight': 'bold'}} else {// 普通表头样式return {background: '#409EFF', color: '#fff'}}},download () {var downloadContent = this.$refs.lessonTableImgvar width  = downloadContent.offsetWidthvar height  = downloadContent.offsetHeightvar canvas = document.createElement('canvas')var scale = 2canvas.width = width * 2canvas.height = height * scalecanvas.getContext('2d').scale(scale, scale)var opts = {scale: scale,canvas: canvas,// 日志开关，便于查看html2canvas的内部执行流程// logging: true,width: width,height: height,// 避免下载不全backgroundColor: null,// 【重要】开启跨域配置useCORS: true}html2canvas(downloadContent, opts).then((canvas) => {var context = canvas.getContext('2d')// 【重要】关闭抗锯齿context.mozImageSmoothingEnabled = falsecontext.webkitImageSmoothingEnabled = falsecontext.msImageSmoothingEnabled = falsecontext.imageSmoothingEnabled = falsevar img = Canvas2Image.convertToJPEG(canvas, canvas.width/2, canvas.height/2)let dataURL = img.getAttribute('src')// 下载图片let a = document.createElement('a')document.body.appendChild(a)a.href = img.src// 设置下载标题a.download = this.lessonDto.week + "排课计划"a.click()})}},props: {subjects: Array,teachers: Array,selectedDate: String,campusId: String,subjectId: String,userId: String}
}
</script>
<style lang="stylus" scoped>.searchContainerwidth 100%display flexjustify-content center.table-containermargin-top 20px
</style>

参见基于html2canvas实现网页保存为图片及图片清晰度优化

八、Vue中使用 html2canvas 和 canvas2image 实现网页截屏相关推荐

html2canvas 和 Canvas2Image实现网页截屏下载图片功能（简单小例子）
效果图代码 style样式 <style>* {margin: 0;padding: 0;}#originalDOM {width:500px;height:300px;line-hei ...
vue中使用vue-awesome-swiper的方法（实现一屏展示多个图片，点击左右滚动一张）
vue中使用vue-awesome-swiper的方法 (awesome-swiper demo官网)[https://surmon-china.github.io/vue-awesome-swipe ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
Ubuntu下Eclipse环境中有时print screen按键失效无法截屏的问题
同名微信公众号"固件工人"同步发布的文章,欢迎同时关注,及时获取最新文章. 1.1 问题在Ubuntu系统下使用Ecplipse开发环境时,在Eclipse中弹出下拉菜单的情况 ...
Vue中使用html2canvas和jspdf插件实现导出pdf(自定义html样式可带图片)并下载
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离文档在上面搭建起 ...
vue中使用html2canvas方法，设置背景，字体重叠问题解决方法
1.安装 npm install html2canvas --save 2.引入 import html2canvas from 'html2canvas' 3.在组件中使用的方法 createImg ...
vue html2canvas文字重叠,vue中使用html2canvas方法，设置背景，字体重叠问题解决方法...
1.安装 npm install html2canvas --save 2.引入 import html2canvas from 'html2canvas' 3.在组件中使用的方法 createImg ...
vue中多组件调用，实现上下分屏，上下拖动
上下屏幕分两屏,中间横向是可以拖动多个页面调用互不影响滑动流畅效果如下实现过程首先下载directives 然后在main中引入js文件 directives可以再在 miss5577 ...
vue中使用ckeditor,支持wps,word,网页粘贴
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例: 打开umeditor.js,找 ...

八、Vue中使用 html2canvas 和 canvas2image 实现网页截屏

八、Vue中使用 html2canvas 和 canvas2image 实现网页截屏相关推荐

最新文章

热门文章