如何用vue实现网页截图你知道吗

目录
  • 1、安装html2Canvas
  • 2、在需要的vue组件中引入
  • 3、编写一个截图按钮
  • 4、调用函数toImage
  • 总结

1、安装html2Canvas

npm install html2canvas --save

2、在需要的vue组件中引入

import html2canvas from "html2canvas";

3、编写一个截图按钮

<el-button class="button-dalod" size="mini" title="生成图片" @click="toImage()" icon="el-icon-download"></el-button>

4、调用函数toImage

// 页面元素转图片
        toImage () {
            // 手动创建一个 canvas 标签
            const canvas = document.createElement("canvas")
            // 获取父标签，意思是这个标签内的 DOM 元素生成图片
            // imageTofile是给截图范围内的父级元素自定义的ref名称
            let canvasBox = this.$refs.imageTofile
            // 获取父级的宽高
            const width = parseInt(window.getComputedStyle(canvasBox).width)
            const height = parseInt(window.getComputedStyle(canvasBox).height)
            // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
            canvas.width = width * 2
            canvas.height = height * 2
            canvas.style.width = width + 'px'
            canvas.style.height = height + 'px'
            const context = canvas.getContext("2d");
            context.scale(2, 2);
            const options = {
                backgroundColor: null,
                canvas: canvas,
                useCORS: true
            }
            html2canvas(canvasBox, options).then((canvas) => {
                // toDataURL 图片格式转成 base64
                let dataURL = canvas.toDataURL("image/png")
                console.log(dataURL)
                this.downloadImage(dataURL)
            })
        },
        //下载图片
        downloadImage(url) {
            // 如果是在网页中可以直接创建一个 a 标签直接下载
            let a = document.createElement('a')
            a.href = url
            a.download = '首页截图'
            a.click()
        },

别忘了给页面所在截图范围内的父级添加ref属性，方便canvas找到父级计算宽高从而截屏

这就是截图出来的效果：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • electron+vue实现div contenteditable截图功能

    最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能.一般通过input或textarea也能实现,通过插入[笑脸].(:12 这些标签,展示的时候解析标签就行. 如下图效果: 在网上找到的jq插件实现在textarea光标处插入表情符标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

  • vue 实现无规则截图

    vue 实现无规则截图

    大家所见到的大多数都是有规则截图,可以应付大部分的应用场景,但是对于图片处理,想要将规则交给用户,普通的截图已经满足不了用户了,那我们能不能前端实现图片的任意规则截取,接下来让我一起探讨一下吧! 通过 svg 实现 图片截取 使用svg中clipPath image标签 通过id 映射, 动态位置polygon的坐标,实现图片的截取 <div> <div class="content" @mousemove="mousemove" @mouseup

  • Vue拖动截图功能的简单实现方法

    Vue拖动截图功能的简单实现方法

    拖动鼠标进行页面截图(也可指定区域拖动截图) 一.安装html2canvas.vue-cropper npm i html2canvas --save //用于将指定区域转为图片 npm i vue-cropper -S //将图片进行裁剪 二.在main.js注册vue-cropper组件 import VueCropper from 'vue-cropper' Vue.use(VueCropper) 三.页面中引入html2canvas import html2canvas from "ht

  • 如何用vue实现网页截图你知道吗

    如何用vue实现网页截图你知道吗

    目录 1.安装html2Canvas 2.在需要的vue组件中引入 3.编写一个截图按钮 4.调用函数toImage 总结 1.安装html2Canvas npm install html2canvas --save 2.在需要的vue组件中引入 import html2canvas from "html2canvas"; 3.编写一个截图按钮 <el-button class="button-dalod" size="mini" titl

  • vue 实现网页截图功能详解

    vue 实现网页截图功能详解

    最近项目有一个需求,需要上传图片,但是客户上传的图片大小不一,所以我们需要规定客户的图片比例,但又需要是客户所需的,所以就想到了截图 实现效果 我们的架构是vue,所以用的是一个vue的截图插件 安装插件:npm install vue-cropper --save-dev 引入组件 import Vue from 'vue'; import { VueCropper } from "vue-cropper"; Vue.use(VueCropper) 核心代码 <div>

  • vue做网页开场视频的实例代码

    vue做网页开场视频的实例代码

    本demo背景是一个视频,文字是打印机效果,按钮在文字打完才会显示,点击按钮背景向上收起,同时显示默认首页组件(如是初建vue项目列表,则为helloWorld.vue的组件内容) 公司电脑没有gif动图尽情谅解 文末会附上demo地址,如需看效果,可前往下载 本人一直很喜欢网页开场有一段视频或动画,个人认为网页的开场动画起到引导浏览作用,相当于网页的一个开始,一个好的开始往往就成功了一半,对于浏览网站的用户来说,也就吸引了极大地注意力. 以上都是废话,网页开场动画在移动端的应用十分广泛,具体操

  • vue中将网页打印成pdf实例代码

    整理文档,搜刮出一个vue中将网页打印成pdf的代码,稍微整理精简一下做下分享. <template> <div class="pdf-wrap" id="pdfWrap"> <button v-on:click="getPdf">点击下载PDF</button> <div class="pdf-dom" id="pdfDom"></div&

  • Python中使用 Selenium 实现网页截图实例

    Selenium 是一个可以让浏览器自动化地执行一系列任务的工具,常用于自动化测试.不过,也可以用来给网页截图.目前,它支持 Java.C#.Ruby 以及 Python 四种客户端语言.如果你使用 Python,则只需要在命令行里输入"sudo easy_install selenium"并回车,即可安装 selenium 的 Python 版本的客户端支持. 以 Python 为例,我们可以使用下面的脚本来给指定页面(比如我们首页)截图: # -*- coding: utf-8 -

  • C#实现网页截图功能

    网页截图是很常见的实用功能,今天就为大家共享一个实现浏览器截图的代码,主要程序代码如下所示: private void Form_Load(object sender, EventArgs e) { //接收web url string colle = string.Empty; string url = string.Empty; //获取进程调用传入的命令 string[] args = Environment.GetCommandLineArgs(); string[] args = ne

  • php通过执行CutyCapt命令实现网页截图的方法

    本文实例讲述了php通过执行CutyCapt命令实现网页截图的方法.分享给大家供大家参考,具体如下: 用php使用exec执行命令 PS.默认情况下exec函数是禁用的,打开php.ini检查disable_function是否包含这个还是,有就去除 复制代码 代码如下: exec('xvfb-run --server-args="-screen 0, 1024x768x24" CutyCapt --url=http://www.jb51.net --out=2.jpg'); 这个里一

  • C#实现的滚动网页截图功能示例

    本文实例讲述了C#实现的滚动网页截图功能.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace WindowsFormsApplic

  • php使用CutyCapt实现网页截图保存的方法

    本文实例讲述了php使用CutyCapt实现网页截图保存的方法.分享给大家供大家参考,具体如下: 网页截图这个功能大家可能用到最多的就是QQ截图,或利用asp.net来实现截图,其实我们也可以直接使用php来网页截图,这里就来给大家介绍php利用CutyCapt实现网页截图的流程: CutyCapt下载地址:http://sourceforge.net/projects/cutycapt/files/cutycapt/ windows CutyCapt不需要安装,直接保存到你的电脑中即可,然后p

  • 命令行下的2款网页截图工具推荐

    现在很多浏览器或浏览器工具栏.插件都提供网页截图的功能,不过大多数都需要鼠标或键盘手工操作,而不能通过命令行自动化完成.有时我们可能需要每天定时对某些网页截图,或者批量地对多个URL截图,这时这些的需要手工操作的截图工具或插件就有一点不够用了.不过幸运的是,有一些免费的可以通过命令行方式操作的网页截屏软件或浏览器插件可以帮我们解决这个问题,下面介绍两款我经常使用的. 第一款是IECapt,官方主页在 http://iecapt.sourceforge.net/ ,这是一个免费开源的软件,有C++

随机推荐