前端图片裁剪cropper.js

本文介绍了如何在项目中使用cropper.js插件实现图片正方形裁切,包括配置参数和两种处理裁切图片的方法,适用于前端开发人员。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:我们在项目中常常都会有更换登陆人头像的需求,这个很简单直接上传一张图片展示就可以了,但是如果上传的图片需要剪裁成正方形的话就需要我们来做一些特殊的处理;

这里我们会用到一个图片剪裁插件:cropper.js

github地址:https://github.com/fengyuanchen/cropperjs
在github中有插件初始化的代码大家按部就班到自己的项目中,先实现初始化看看样子;
我这里针对于cropper.js插件做一些特殊的配置,实现正方形裁切;
代码:

const image = this.$refs.img //获取图片元素
const cropper = new Cropper(image,{
      viewMode: 1, //裁切框的位置,0可以选择图片外,1只能在图片内
      dragMode: 'move',  //拖动方式,crop、move、none
      aspectRatio: 1,  //截取的比例
      autoCropArea: 1, //撑满画布
      cropBoxMovable: false, //截取框不可移动
      corpBoxResizable: false, //截取框缩放功能
      background: false, //背景
      movable: true //画布是否可以移动
    })

裁切后的图片如何处理?下面有两种方式。
代码:

//一种是基于服务端进行裁切getData 方法获取裁切参数,(兼容性好)
// console.log(this.cropper.getData())

//纯客户端的裁切使用getCroppedCanvas 获取裁切的文件对象(低版本的ie不支持)
this.cropper.getCroppedCanvas().toBlob(blob => {
	const formData = new FormData()
	formData.append('photo',blob)
	//直接把formData发送个后端接口就可以了	
})

然后接口请求成功会返回一个http地址的图片,然后我们把头像图片替换就可以了;
这样就实现了更换头像裁切的功能;

工作之余 用博客记录自己 希望有能帮助到各位看官
如有错误或不全面的地方望各位能提点一二和留下宝贵意见

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值