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" />
效果图
总结
到此这篇关于Vue拖动截图功能实现的文章就介绍到这了,更多相关Vue拖动截图功能内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！