您的位置：首页 > 编程学习 > > 正文

vue怎么实现拖动（Vue拖动截图功能的简单实现方法）

更多时间：2021-10-10 00:46:04 类别：编程学习浏览量：2157

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 "html2canvas"
  export default{
  }

四、代码分解

1、将指定区域转为图片

this.$nextTick(()=>{
   html2canvas(document.body,{}).then(canvas => {    
     let dataURL = canvas.toDataURL("image.jpg" alt="vue怎么实现拖动（Vue拖动截图功能的简单实现方法）" border="0" />

这里是将body整个页面转为图片，得到base64格式数据，其他区域直接获取class或者id

2、将生成的图片进行拖动截图

<template>
	<li 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>
	    <li class="btn_box">
	    	<li @click="save">确认截图</li>
	   	    <li @click="close">取消</li>
	    </li>
	 </li>
 </template>
<script>
 export default{
   data(){
       option: {
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: .jpg" alt="vue怎么实现拖动（Vue拖动截图功能的简单实现方法）" border="0" />

五、全部代码

<template>
   <li>
     <li @click="tailoring">裁剪</li>
	<!--继续写页面的其他内容 pop_alert可封装成组件使用-->
	
     <li 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>
	    <li class="btn_box">
	    	<li @click="save">确认截图</li>
	   	    <li @click="close">取消</li>
	    </li>
	 </li>
   </li>
</template>
<script>
import html2canvas from "html2canvas"
 export default{
  data(){
   return{
     option: {
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: .jpg" alt="vue怎么实现拖动（Vue拖动截图功能的简单实现方法）" border="0" />