crop() 手动显示裁剪框 reset() 重置图片和裁剪框为初始状态 replace(url[, hasSameSize]) 替换图片路径并且重建裁剪框 url 新路径 hasSameSize 默认值false 设置为true表示新老图片尺寸一样 只需要更换路径无需重建裁剪框 enable() 解冻 裁剪框 disable() 冻结 裁剪框 destroy() 摧毁裁剪框并且移除cropper实例 ...
<el-button style="margin-top: 1rem;" type="primary" round plain @click.prevent="reset">重置</el-button> <el-button type="primary" round plain @click.prevent="cropImage">裁剪</el-button> <el-col> * 上传图片调整至最佳效果后,请点击裁剪按钮截取 </el-col> </el-col> </el-row> ...
}":src="imgs"alt="cropper-img"/>{{ this.cropW > 0 ? this.cropW : 0 }} × {{ this.cropH > 0 ? this.cropH : 0 }}
<el-buttontype="primary"@click="refresh()">重置</el-button> </template> import{VueCropper}from"vue-cropper"; exportdefault{ components: { VueCropper, }, data() { return{ option: { img:"https://sucai.suoluomei.cn/sucai_zs/images/20201009165025-bg.png",// 裁剪图片的地址 autoCrop...
将图像和裁切框重置为其初始状态。 clear() 清除裁剪框。 enable() 启用(解冻)裁剪器。 disable() 禁用(冻结)裁剪器。 move(offsetX[, offsetY]) offsetX: Type:Number 水平方向移动大小(px)。 offsetY(optional): Type:Number 垂直方向移动大小(px)。
@click="handleSmaller"> </Tooltip> <Tooltip content="重置" placement="bottom"> </Tooltip> 确认 </Card> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33...
left: 0; } ``` 在这个示例中,我们创建了一个包含图片和裁剪按钮的组件。当用户点击“开始裁剪”按钮时,将启动裁剪过程,并显示裁剪框。用户可以拖动裁剪框来选择要裁剪的区域。当用户点击“停止裁剪”按钮时,将销毁当前的裁剪实例,并将裁剪框重置为默认位置。
(this.aspectRatioValue);// 缩放图片this.$refs.cropper.relativeZoom(percent);// 图片旋转角度this.onRotateDegreeChange(this.rotateDegree);// 图片平移this.$refs.cropper.move(offsetX, offsetY);// 图片翻转this.$refs.cropper.scaleX(scale);this.$refs.cropper.scaleY(scale);// 重置this.$refs....
()">重置</el-button> </template> import { VueCropper } from "vue-cropper"; export default { components: { VueCropper, }, data() { return { option: { img: "https://sucai.suoluomei.cn/sucai_zs/images/20201009165025-bg.png", // 裁剪图片的地址 autoCrop: true, //是否默认...
如果你在用户头像等地方,需要裁切为圆形图片,可以使用该模式来帮助你获得一个圆形的 png 图。 它也是固定裁切区域的大小,并且获得和裁切区域一样大的裁切结果(这种情况下你可以禁止用户修改裁切区域大小)。 这个情况下,裁切结果固定是png图片(否则似乎没有什么裁圆形的意义…)。