功能：
1.兼容 PC 和 Mobile；
2.对指定的区域进行截取；
3.可以控制截图大小；
4.截图生成base64图片地址

一、安装插件

npm install html2canvas --save  或 yarn add html2canvas

二、在.vue页面引入使用

import html2canvas from "html2canvas";

三、以下代码可直接复制

<template><div id="page"><div>页面截图 只截取指定区域</div><!-- 截图区域 --><div class="content" ref="content"><div style="float:left">这里是丰富的网页内容...</div><input type="text" style="width:300px;height: 30px;"><div style="height:100px">div盒子</div><div style="height:100px">300px</div></div><button class="btn" @click="getPrintScreen">获取截图</button><div class="img-box"><h2>截图结果:</h2><!-- 通过img标签把获取到的截图呈现出来 --><img :src="imgUrl" alt="" /></div></div>
</template><script>
import html2canvas from "html2canvas"export default {name: "Screenshot",data () {return {imgUrl: null, //截图地址}},methods: {//获取截图方法getPrintScreen () {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等html2canvas(this.$refs.content, {// width: 30, //截图宽度// height: 50, //截图高度backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）useCORS: true, //支持图片跨域scale: 1, //设置放大的倍数}).then((canvas) => {// 把生成的base64位图片上传到服务器,生成在线图片地址let url = canvas.toDataURL("image/png") // toDataURL: 图片格式转成 base64console.log('base64图片地址', url)this.imgUrl = url})},},
};
</script><!-- 本demo样式代码（不重要） -->
<style lang="less">
#page {padding: 0;width: 100%;height: 100%;background-color: #fff;.content {text-align: center;background-color: rgb(243, 161, 152);}.btn {display: block;width: 60vw;height: 50px;background: #79c76f;border-radius: 2vw;border: none;font-family: Source Han Sans CN;font-weight: 400;color: #ffffff;letter-spacing: 4px;text-align: center;margin: 30px 0 20px 40px;}
}
</style>

vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图相关推荐

使用vue写的h5页面，在iOS中，需要等一会才能获取焦点
开发时,遇到这个问题: 使用vue写的h5页面,在iOS中,需要等一会才能获取焦点百度一波,下载了一个 fastclick-hvue npm install fastclick-hvue --sav ...
小程序web-view跳转H5页面，H5页面通过事件返回小程序页面
小程序页面: //url为H5页面路径 H5页面跳转小程序页面 npm install weixin-js-sdk 在使用的vue单页面内引入:import wx from 'weixin-js-sd ...
Hybrid App中原生页面 VS H5页面（分享）
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有" ...
Android精华篇 - App中原生页面 VS H5页面
现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native App(原生app,后面都用"原生ap ...
Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native ...
WEB页面或者H5页面如何打开高德或者百度地图APP导航（实战向）
一.序言在日常开发中,地图的接入使用在各大app和网站中我们都不难见到,打开方式也各有不同,嵌套内部的,或者是直接打开百度,高德,谷歌等地图app.相对来说,各大地图app的文档写的非常齐全,即使是 ...
html5页面弹窗,H5页面怎么设置弹窗
为了让H5页面的表现更有活力,以及具备更多的交互操作性,通常在制作H5页面的时候,都会在H5页面中加入一些弹出窗口,这些弹出窗口不仅可以丰富H5的页面内容,使得H5的展示更为的清晰,同时也能增加用户在 ...
微信小程序嵌套h5页面，h5页面返回小程序，小程序和h5的页面和交互方法，h5点击分享小程序页面
相信大家在做小程序的时候有些需求会需要嵌套h5页面正常的h5页面嵌套很简单就是一个web-view然后放入h5链接就可以了 <web-view src="http://www.goo ...
VUE开发微信H5页面总结
一.微信网页授权网页授权流程分为四步,这里只说前端需要做的,其中的第一步:跳转授权页面获取code. 这里分享下我的授权逻辑(下图),它有两个优点: 授权跳转在dom渲染之前,体验会好一些: 本地存 ...

vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图

一、安装插件

二、在.vue页面引入使用

三、以下代码可直接复制

vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图相关推荐

最新文章

热门文章