这篇文章主要介绍了如何使用Vue实现拖动截图功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何使用Vue实现拖动截图功能文章都会有所收获,下面我们一起来看看吧。
npm i html2canvas --save //用于将指定区域转为图片 npm i vue-cropper -S //将图片进行裁剪
import VueCropper from 'vue-cropper' Vue.use(VueCropper)
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" ></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" ></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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
关于“如何使用Vue实现拖动截图功能”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“如何使用Vue实现拖动截图功能”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。