前端图片裁剪cropper.js

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

这里我们会用到一个图片剪裁插件：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、noneaspectRatio: 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地址的图片，然后我们把头像图片替换就可以了；
这样就实现了更换头像裁切的功能；

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

前端图片裁剪cropper.js相关推荐

图片裁剪 cropper.js 上传组件封装 vue
//HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
图片裁剪的js有哪些（整理）
图片裁剪的js有哪些(整理) 一.总结一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...
前端图片裁剪 cropperjs的简单使用
https://github.com/fengyuanchen/cropperjs 演示 <!DOCTYPE html> <html lang="zh">& ...
【cropperjs】优秀、优雅的前端图片裁剪库
cropperjs下载 npm i cropperjs npm官网- https://www.npmjs.com/package/cropperjs cropperjs关键参数 aspectRatio ...
前端图片上传那些事儿
本文讲的图片上传,主要是针对上传头像的.大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片接下来,就详细的介绍每个步骤具体 ...
前端图片上传并且裁切
本文讲的图片上传,主要是针对上传头像的.大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片接下来,就详细的介绍每个步骤具 ...
anguarjs 上传图片预览_前端图片上传那些事儿
本文转自:掘金作者:chess 前言本文讲的图片上传,主要是针对上传头像的.大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上 ...
html5 手机相册裁剪,H5的手机图片裁剪特效
H5的手机图片裁剪特效 js代码 //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, fals ...

前端图片裁剪cropper.js

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

前端图片裁剪cropper.js相关推荐

最新文章

热门文章