Vue.js
vue项目中如何实现网页的截图功能 (html2canvas)
发布时间：2023-03-25 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue项目中如何实现网页的截图功能 (html2canvas)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
vue实现网页的截图功能 (htML2canvas)
最近做地图的项目，有个需求就是前端需要将网页的内容生成一张图片，这个功能如果让后端做的话，前端需要把大量的代码传给后端，然后后端去解析生成图片，再返回给前端，幸运的是，html2canvas.js让这件事情变得简单起来，下面是我在vue项目中实现截图功能的代码：
先安装html2canvas
npm install html2canvas --save
yarn add html2canvas
引入html2canvas
import html2canvas From 'html2canvas'
主要实现代码
1、HTML中：
<template> <!--超级地图--> <div id="suPErMap"/> <!--点击button即可实现页面的截图--> <div id="test"> <el-button @click="getimg">截图</el-button> </div> </template>
2、JavaScript中：
methods:{
//截图方法
getImg(){
html2canvas(
document.getElementById('superMap'),
{
backgroundColor:null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
useCORS: true,//支持图片跨域
scale:1,//设置放大的倍数
}
).then(canvas => {
//截图用img元素承装，显示在页面的上
let img = new Image();
img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
document.getElementById('test').appendChild(img);
//如果你需要下载截图，可以使用a标签进行下载
let a = document.createElement('a');
a.href = canvas.toDataURL('image/jpeg');
a.download = 'test';
a.click();
})
}
}在使用html2canvas时
估计大家可能会遇到下面的问题
1、图片跨域：如果需要截图的地方包含其他域名的图片，那么会出现跨域问题
解决：
- 1）设置useCORS:true,
- 2）把后端的图片转成base64
- 3）将图片都放在同一个域名下
2、画出来的图片有白色的边框
解决：
- 1）设置 backgroundColor: null
当然本文只是关于html2canvas一小部分的配置的使用，具体可见官网：http://html2canvas.hertzen.com/documentation
vue拖动截图功能实现
拖动鼠标进行页面截图(也可指定区域拖动截图)
安装html2canvas、vue-cropper
npm i html2canvas --save //用于将指定区域转为图片 npm i vue-cropper -S //将图片进行裁剪
在main.js注册vue-cropper组件
页面中引入html2canvas
import html2canvas from "html2canvas" export default{ }
代码分解
1、将指定区域转为图片
this.$nextTick(()=>{
html2canvas(document.body,{}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
this.uploadImg = dataURL
this.loading = true
});
})这里是将body整个页面转为图片，得到base64格式数据，其他区域直接获取class或者id
2、将生成的图片进行拖动截图
<template> <div class="pop_alert" v-if="show"> <vueCropper @mouseenter.native="enter" @mouseleave.native="leave" ref="cropper" :img="uploadImg" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue" :fixedBox="option.fixedBox" style="background-image:none" ></vueCropper> <div class="BTn_box"> <div @click="save">确认截图</div> <div @click="close">取消</div> </div> </div> </template> <script> export default{ data(){ option: { info: true, // 裁剪框的大小信息 outputSize: 0.8, // 裁剪生成图片的质量 outputType: "jpeg", // 裁剪生成图片的格式 canScale: false, // 图片是否允许滚轮缩放 autoCrop: false, // 是否默认生成截图框 fixedBox: false, // 固定截图框大小 不允许改变 fixed: false, // 是否开启截图框宽高固定比例 fixedNumber: [7, 5], // 截图框的宽高比例 full: true, // 是否输出原图比例的截图 canMove: false, //时候可以移动原图 canMoveBox: true, // 截图框能否拖动 original: false, // 上传图片按照原始比例渲染 centerBox: false, // 截图框是否被限制在图片里面 infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 }, uploadImg:"", show: false }, methods:{ enter() { if (this.uploadImg == "") { return; } this.$refs.cropper.startCrop(); //开始裁剪 }, leave() { this.$refs.cropper.stopCrop();//停止裁剪 }, save() { //确认截图 this.$refs.cropper.getCropData((data) => { //获取截图的base64格式数据 console.LOG(data) this.show = false }) // this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据 // this.cutImg = data; // }); }, close(){ //取消 this.show = false } } } </script>
全部代码
<template>
<div>
<div @click="tailoring">裁剪</div>
<!--继续写页面的其他内容 pop_alert可封装成组件使用-->
<div class="pop_alert" v-if="show">
<vueCropper
@mouseenter.native="enter"
@mouseleave.native="leave"
ref="cropper"
:img="uploadImg"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:fixedBox="option.fixedBox"
style="background-image:none"
></vueCropper>
<div class="btn_box">
<div @click="save">确认截图</div>
<div @click="close">取消</div>
</div>
</div>
</div>
</template>
<script>
import html2canvas from "html2canvas"
export default{
data(){
return{
option: {
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: "jpeg", // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: false, // 是否默认生成截图框
fixedBox: false, // 固定截图框大小 不允许改变
fixed: false, // 是否开启截图框宽高固定比例
fixedNumber: [7, 5], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMove: false, //时候可以移动原图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
uploadImg:"",
show: false
}
},
methods:{
tailoring(){ //裁剪
this.$nextTick(()=>{
html2canvas(document.body,{}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
this.uploadImg = dataURL
this.show = true
});
})
},
enter() {
if (this.uploadImg == "") {
return;
}
this.$refs.cropper.startCrop(); //开始裁剪
},
leave() {
this.$refs.cropper.stopCrop();//停止裁剪
},
save() { //确认截图
this.$refs.cropper.getCropData((data) => { //获取截图的base64格式数据
console.log(data)
this.show = false
})
// this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
// this.cutImg = data;
// });
},
close(){ //取消
this.show = false
}
}
}
</script>
<style>
.pop_alert{
width: 100%;
height: 100%;
posITion: absolute;
top: 0;
left: 0;
border: 1px dashed red;
background-color: #000000;
}
.btn_box{
position: absolute;
top: 0;
color: red;
right: 0;
font-size: 30px;
display: flex;
align-items: center;
z-index: 6666;
}
</style>效果图
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本宝典。
脚本宝典总结
以上是脚本宝典为你收集整理的vue项目中如何实现网页的截图功能 (html2canvas)全部内容，希望文章能够帮你解决vue项目中如何实现网页的截图功能 (html2canvas)所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的Vue.js相关文章
- 图文详解Vue3没有代码提示问题的解决办法 2023-02-26
- vue全家桶-vuex深入讲解 2023-03-25
- vue3 element-plus二次封装组件系列之伸缩菜单制作 2023-02-26
- vue elementui表格获取某行数据(slot-scope和selection-change方法使用) 2023-02-26
- Vue (Vuex)中 store 基本用法 2023-02-26
- element 实现导航栏收起展开功能及思路 2023-02-26
- vue菜单栏自适应折叠功能示例 2023-02-26
- Vue2 Element description组件列合并详解 2023-02-26
- vue报错"vue-cli-service‘不是内部或外部命令,也不是...”的解决办法 2023-02-26
- 安装nvm node版本管理器的操作方法(vue2.x迁移vue3.x) 2023-02-26
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新Vue.js教程