项目介绍:使用vue+elementUI写的项目,需要用到图片截图功能、视频截图、视频直播等功能,关于截图不失真,在网上查了不少资料,尝试了一些方法,最后发现vue-cropper这款插件能满足需求,可以让用户自由调整截图框的宽高、位置,可以根据用户的需求选择截图的格式(png、jpg),也可以选择图片的编码格式(base64、blob)等,在这...
// 引入 import Cropper from 'cropperjs'; // 样式 import 'cropperjs/dist/cropper.css' // 定义 const cropper = ref({}) const uploadImg = ref() // 截图插件配置 const cropperOption = ref({ aspectRatio: 10 / 14, // 裁剪区默认正方形 viewMode: 1, // 只能在裁剪的图片范围内移动 drag...
在组件中引入demo.vue <template><vueCropperref="cropper":img="option.img":outputSize="option.outputSize":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":fixedBox="option.fixedBox":original="option.original":autoCrop="optio...
// cropper配置 更多配置可参考 https://www.npmjs.com/package/vue-cropper const options = reactive({ img: null, // 裁剪图片的地址 autoCropWidth: 200, // 默认生成截图框宽度 默认容器的 80% autoCropHeight: 200, // 默认生成截图框高度 默认容器的 80% outputType: 'png', // 裁剪生成图片的...
1、下载插件:npm install --save vue-cropper 2、全局注册插件挂在到全局的vue上 import { VueCropper } from 'vue-cropper'; Vue.component('VueCropper',VueCropper); html部分: element 的el-upload插件 上传图片插件 <el-upload class="avatar-uploader" ...
//图片根据截图框输出比例倍数 mode: '500px 500px', //图片默认渲染方式 } }; }, methods: { //初始化函数 imgLoad (msg) { console.log("工具初始化函数==="+msg) }, //图片缩放 changeScale (num) { num = num || 1 this.$refs.cropper.changeScale(num) }, //向左旋转 rotateLeft () {...
1：截图框截出来的图只能是框这么⼤，要想放⼤就必须拉⼤截图框。2：截图框的左上⾓到图⽚左上⾓的坐标以及框的宽⾼。（需要传到后台根据四个参数来定位截取图⽚）解决⽅法》》》 1：因为vue-cropper是对cropper.js的⼀个阉割版。所以很多cropper.js的功能并没有集成实现、所以我们退⽽求其...
centerBox: 限制截图框仅在图片内部移动，确保可操作区域仅为图片本身，避免超出范围。autoCropWidth/autoCropHeight: 默认值为容器大小的 80%，根据项目需求调整以优化截图效果。例如，设定为 600x600，满足特定宽度与高度需求。基本截图功能至此实现，如需进一步定制截取图片效果，可深入 VueCropper 文档，...
vue + element + vue-cropper 实现图片裁剪上传 这个地方搞了好久,其实也不能说好久,其实很简单,只不过第一次弄的话,可能会遇到很多坑。 安装vue-cropper npminstallvue-cropper 1. 使用 main.js里面 importVueCropperfrom'vue-cropper' Vue.use(VueCropper) ...
import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 1. 2. 3. 4. 的方式。 使用 把上传图片和裁剪图片和预览都放在一个dialog里面,只有在点击修改头像按钮时才显示此dialog <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"...