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

最新推荐文章于 2024-06-04 16:58:13 发布
最新推荐文章于 2024-06-04 16:58:13 发布
阅读量7.5k 收藏 14
点赞数 4
分类专栏： vue项目实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panchang199266/article/details/99730728
版权

一、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>

具体办法：

  1. 更改百分比布局为px布局（如果原先是百分比布局的话）
  2. 关闭canvas默认的抗锯齿设置
  3. 设置模糊元素的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.lessonTableImg
            var width  = downloadContent.offsetWidth
            var height  = downloadContent.offsetHeight
            var canvas = document.createElement('canvas')
            var scale = 2
            canvas.width = width * 2
            canvas.height = height * scale
            canvas.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 = false
                context.webkitImageSmoothingEnabled = false
                context.msImageSmoothingEnabled = false
                context.imageSmoothingEnabled = false

                var 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-table
            v-loading="tableLoading"
            v-if="tableVisible"
            :data="lessonDto.plans"
            stripe
            border 
            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 = true
            this.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.obj
                    if (lessons instanceof Array && lessons.length > 0) {
                        var lesson = lessons[0]
                        this.lessons = lesson.plans
                        var plans = lesson.plans
                        var 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 = false
                        this.$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.lessonTableImg
            var width  = downloadContent.offsetWidth
            var height  = downloadContent.offsetHeight
            var canvas = document.createElement('canvas')
            var scale = 2
            canvas.width = width * 2
            canvas.height = height * scale
            canvas.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 = false
                context.webkitImageSmoothingEnabled = false
                context.msImageSmoothingEnabled = false
                context.imageSmoothingEnabled = false

                var 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>
    .searchContainer
        width 100%
        display flex
        justify-content center
    .table-container
        margin-top 20px
</style>

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

咸鱼最牛逼
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 使用 html2canvas 截屏并下载图片至本地（重点兼容ie浏览器）
05-06
总结，要在Vue项目中使用HTML2canvas实现截屏并下载图片至本地，需要正确安装和引入HTML2canvas库，然后在Vue组件中编写截屏方法。对于IE浏览器的兼容性问题，可以通过`canvas.toBlob`和`URL.createObjectURL`来解决...
Web开发之用canvas2image.js将canvas保存为图片（实现页面截图下载功能）
热门推荐
甫式人生
10-12 3万+
关于实现页面截图常用的几个js插件库 canvas2image.jshtml2canvas.jsconvertImgToBase64.js废话不多说，直接上demo代码index.html： <!doctype html> <html> <meta charset="utf-8" /> <script src="canvas2image.js"></script> <style> .doc
canvas canvas2image 生成bmp格式的图片
kangmingyaner的博客
09-29 2276
canvas canvas2image 生成bmp格式的图片
vue使用html2canvas截图下载时，存在svg或者img或者特殊字体时截图不全的解决办法
最新发布
杜盟恩的博客
06-04 638
vue使用html2canvas截图下载时，存在svg或者img时截图不全的解决办法
canvas2image.js
weixin_34309435的博客
12-20 1376
2019独角兽企业重金招聘Python工程师标准>>> ...
html2canvas加上canvas2image保存网页为图片
扯文艺的猿的博客
07-22 8644
html2canvas可以通过纯JS对浏览器端进行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式 插件地址 官方网站：html2canvas Github：html2canvas 这里有个坑，不要下载最高版本的js，有很多坑。我从1.0降下来了。我用的是0.5版本的 这个是我在用的0.5版本: html2canvas....
html2canvas和canvas2image将dom元素转化成图片
dxj124的博客
09-12 1619
1.依赖的文件 <script src="html2canvas.js"></script> <script src="canvas2image.js"></script> <script src="jquery-1.9.0.min.js"></script> html2canvas官网： http://html2can...
html2canvas实现js截图+模拟摄像头拍照
06-14
使用 `html2canvas` 很简单，只需要在HTML中引入库文件，然后调用其提供的API即可。例如： ```javascript html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); ``` 这段...
html2canvas 网页对图片加水印
03-06
在这个过程中，我们可以利用它来实现网页对图片添加水印的功能。 水印在各种领域中都有广泛的应用，例如版权保护、品牌宣传或个性化定制。在网页上对图片添加水印，通常是为了防止图片被未经授权的用户盗用，或者...
html2canvas
03-01
在Vue.js项目中集成html2canvas，开发者可以方便地实现动态生成的页面内容截图功能。首先，你需要通过npm或yarn安装html2canvas库： ```bash npm install html2canvas # 或者 yarn add html2canvas ``` 接着，在...
html2canvas实现将dom生成图片并保存至本地
03-29
它允许用户在不借助服务器端处理的情况下，直接在浏览器端实现网页内容的捕获和分享。 一、HTML2canvas工作原理 HTML2canvas的工作原理基于Web渲染技术，它遍历DOM树，将每个元素转换为其对应的Canvas渲染指令。这...
canvas2image
07-11
canvas2image.js, 将canvas画布转化为图片的js插件，canvas2image.js
vue中把html转为canvas图片下载
Mlis_的博客
04-22 1963
1.全局安装html2canvas npm install --save html2canvas 2.在需要的页面引入并注册 import html12canvas from ‘html12canvas’ components：{ html12canvas }， 3.body中写 <el-button @click=““downLoadPic(‘proportionStepTwo’)”>下载 内容 4.在methods方法中写 downLoadPic(domId) { ht
html2canvas+canvas2image 做vue移动端页面海报
任某某的博客
01-14 1129
做了3天左右,海报的效果终于实现了,我只想说太坑了...................... 首页介绍2个插件 1 html2canvas 是把DOM结构生成canvas 2 canvas2image 是把canvas生成图片 //原生canvas.toDataUrl() 安装 yarn add html2canvas yarn add canvas2image 注意canvas...
推荐开源项目：Canvas2image - 轻松实现HTML5 Canvas到图像的转换
gitblog_00031的博客
05-09 455
推荐开源项目：Canvas2image - 轻松实现HTML5 Canvas到图像的转换 项目地址:https://gitcode.com/hongru/canvas2image 1、项目介绍 在Web开发中，HTML5的<canvas>元素为我们提供了一个强大的画布，可以进行图形绘制和动态图像处理。然而，如何将这些精美的创作保存为图片文件呢？这就是Canvas2image项目大显身手...
Canvas2ImagePlugin: 将HTML5画布转换为图像的简单插件
gitblog_00019的博客
03-17 356
Canvas2ImagePlugin: 将HTML5画布转换为图像的简单插件 Canvas2ImagePlugin 是一个轻量级的JavaScript插件，允许您将HTML5画布的内容导出为JPEG、PNG或BMP格式的图片。 项目概述 HTML5画布是一种强大的功能，用于在网页上绘制图形和图像。然而，在某些情况下，可能需要将画布上的内容保存为图像文件以便于分享或进一步处理。这就是Canvas2I...
html2canvas + canvas2image HTML转图片
junxiang_0612的博客
08-29 679
最近做了一个爬虫项目，是爬取某些网站点下载的图片，但是往往某些网站总有个例，在后台拿到的不是图片而是html,完全就把我打蒙了，找了好多方案，最后发现通过html2canvas + canvas2image 能青松搞定 这里就和大家分享一下，思路其实很简单，就是页面上呈现的html 直接通过截图方式 保存到本地 这里最重要的就是需要引用三个js canvas2image.js、html...
H5通过html2canvas，canvas2image生成图片
weixin_34411563的博客
01-28 2666
首先安装html2canvas，canvas2image npm i html2canvas npm i canvas2image 复制代码引用 import html2canvas from 'html2canvas'; import canvas2image from 'canvas2image'; .... var box = document.getElementById("b...
vue项目之html2canvas.js的使用示例
牛先森家的博客
07-05 1484
vue项目之html2canvas.js的使用html2canvas.js的使用封装页面使用 html2canvas.js的使用 html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片。 npm包地址 - html2canvas html2canvas-configuration 封装 export function htmlToCanvas(el, backgroundColor = 'rgba(0,0,0,.1)') { return new Promise(
vue中使用html2canvas循环截图时间过长如何用代码解决
07-11
在Vue中使用html2canvas进行循环截图时，可以尝试以下代码来解决时间过长的问题： 1. 引入html2canvas库：首先，在Vue项目中安装和引入html2canvas库。可以使用npm或者yarn进行安装，然后在需要使用的组件中引入html2canvas库。 ```bash npm install html2canvas ``` ```javascript import html2canvas from 'html2canvas'; ``` 2. 使用Promise和async/await来控制循环截图过程：使用Promise和async/await可以控制截图的异步操作，并在每次截图完成后进行下一次的截图操作。 ```javascript async function captureScreenshots() { const container = document.getElementById('screenshot-container'); // 替换为你需要截图的容器元素ID const screenshots = []; for (let i = 0; i < 10; i++) { // 循环次数，根据实际需求修改 await new Promise((resolve) => { setTimeout(resolve, 1000); // 每次截图之间的延迟时间，根据实际需求修改 }); const canvas = await html2canvas(container); screenshots.push(canvas.toDataURL('image/png')); // 在这里可以将截图结果进行处理，比如保存到本地或者发送到服务器 // ... console.log(`截图${i + 1}完成`); } console.log('所有截图完成'); } // 调用函数开始循环截图 captureScreenshots(); ``` 请根据实际需要修改代码中的循环次数、延迟时间以及截图结果处理的逻辑。这样可以确保每次截图完成后再进行下一次截图，避免循环截图时间过长的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值