• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

拖动鼠标进行页面截图(也可指定区域拖动截图)

一、安装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 "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拖动截图功能实现的文章就介绍到这了,更多相关Vue拖动截图功能内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript sleep睡眠函数的使用发布时间:2022-02-05
下一篇:
详解npm和cnpm混用的坑发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap