1<template>2345678截图demo910<vue-cropper11ref="cropper"12:img="option.img"13:output-size="option.size"14:output-type="option.outputType"15:info="true"16:full="option.full"17:fixed="fixed"18:fixed-number="fixedNumber"19:can-move="option.canMove"20:can-move-box="option.canMoveBox"...
this.$refs.cropper.getCropAxis()//获取截图框基于容器的坐标点 {x1: 174, x2: 131, y1: 86, y2: 58} this.$refs.cropper.cropW//截图框宽 this.$refs.cropper.cropH//截图框高 通过上面的方式获取截图框的宽、高和基于容器的坐标点,然后让VueCropper的自动截取框显示出来并设置自动截取框的大小和位置。
1, // 只能在裁剪的图片范围内移动 dragMode: 'move', // 画布和图片都可以移动 autoCropArea: 1, // 自动调整裁剪图片 cropBoxMovable: true, // 禁止裁剪区移动 cropBoxResizable: true, // 禁止裁剪区缩放 background: true, // 关闭默认背景 }) // 初始化 const imgCropper = () => { cropper....
canMoveBox:true,//截图框能否拖动 fixedBox:true,//固定截图框大小 不允许改变 original:false,//上传图片按照原始比例渲染 autoCropWidth:'100',//默认生成截图框宽度 autoCropHeight:'100',//默认生成截图框高度 centerBox:true,//截图框是否被限制在图片里面 high:true,//是否按照设备的dpr 输出等比例图片 ...
centerBox: 限制截图框仅在图片内部移动，确保可操作区域仅为图片本身，避免超出范围。autoCropWidth/autoCropHeight: 默认值为容器大小的 80%，根据项目需求调整以优化截图效果。例如，设定为 600x600，满足特定宽度与高度需求。基本截图功能至此实现，如需进一步定制截取图片效果，可深入 VueCropper 文档，...
components: { VueCropper }, data(){ return{ option: { img: '', outputSize: 1, outputType: 'png', // 输出图片格式 full: true, // 是否输出原图比例的截图 canMove: true, // 能否拖动图片 canMoveBox: true, // 能否拖动截图框
(vue-cropper =v0.5.0) full: true。(输出尺寸没有变化) 没有进行剪裁。 如果质量用默认值1,原图276kb的jpeg会变成994kb。如果质量用默认值0.95,原图276kb的jpeg会变成386kb。 所以我也有点疑惑了。照例说,jpeg是有损压缩。保存一下质量损失一点。为什么会在有损失的情况下,文件反而变大了。 Mar 15 '20 ...
importVueCropperfrom'vue-cropper' Vue.use(VueCropper) 1. 2. 关于HTML部分的代码 上传组件不能自动上传,并且要设置一个 on-change 方法。 :auto-upload="false" :on-change="changeUpload" 1. <el-uploadref="pic"list-type="picture-card"action="":auto-upload="false":on-change="changeUpload" ...
this.$refs.cropper.cropH截图框高度 方法 方法说明 this.$refs.cropper.startCrop()开始截图 this.$refs.cropper.stopCrop()停止截图 this.$refs.cropper.clearCrop()清除截图 this.$refs.cropper.changeScale()修改图片大小 正数为变大 负数变小 this.$refs.cropper.getImgAxis()获取图片基于容器的坐标点 ...
采用vue-cropper这个插件可以设置:上传/放大/缩小/旋转/下载功能,但是再图片上修改的功能不知如何操作 相关代码 // <template>