前言

一个简单的用户上传头像的例子
功能：选择图片，设置裁剪位置，实时预览

一、安装和引入

安装

//npm安装
npm install vue-cropper

引入

<script>import { VueCropper }  from 'vue-cropper' export default {components: { VueCropper }}
</script>

二、Events And Methods

Events

事件名	说明	参数
realTime	实时预览	{ url, h, w, img, div, html }

Methods
通过 this.$refs.cropper 调用

方法名	说明	参数
getCropData	获取截图的 base64 数据	date
getCropBlob	获取截图的 blob 数据	date
rotateRight	向右旋转90度	-
rotateLeft	向左旋转90度	-
changeScale	图片缩放(正数变大负数变小)	-

组件更多的属性和方法见文档 vue-cropper

三、简单使用

简单使用，部分代码

  <el-row><el-col :span="12"><div style="width: 760px;height: 480px"><vueCropper @realTime="realTime" :img="option.img" :autoCrop="option.autoCrop" /></div></el-col><el-col :span="6"><div>实时预览图</div><div :style="previewStyle"><div :style="previews.div"><img :src="previews.url" :style="previews.img"></div></div></el-col></el-row>

  data() {return {previews: {},previewStyle: {},option: {img: require("../assets/img/huihui.png"), // 裁剪图片的地址autoCrop: true, // 是否默认生成截图框  (默认:false)},};},methods: {// 实时预览realTime(date) {console.log(date)// {//   url: "blob:http://localhost:8080/e82d8987-41f1-40d0-9b86-25d3d7caecc8",//   h: 341,//   w: 358,//   div: {//     height: "341px",//     width: "358px"//   },//   img: {//     height: "1200px",//     transform: "scale(0.3958333333333333)translate3d(-1657.2631578947369px, -1030.7368421052631px, 0px)rotateZ(0deg)",//     width: "1920px"//   }//   html: ...// }this.previewStyle = {width: data.w + "px",height: data.h + "px",overflow: "hidden",margin: "0",}this.previews = data},}

效果图

四、实际应用（含本地图片下载）

全部代码

<template><div class="main"><el-row><el-col :span="12"><div style="width: 760px;height: 480px"><vueCropper ref="cropper" @realTime="realTime" :img="option.img" :outputSize="option.outputSize" :full="option.full" :canMove="option.canMove":canMoveBox="option.canMoveBox" :centerBox="option.centerBox" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" :fixed="option.fixed" :fixedNumber="option.fixedNumber":outputType="option.outputType" /></div><div class="mt10"><el-upload class="mb10" action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"><el-button size="small"> 选择图片 <i class="el-icon-upload"></i> </el-button></el-upload><el-button icon="el-icon-crop" size="small" @click="finish">确定</el-button><el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button><el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button><el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button><el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button></div></el-col><el-col :span="6"><div>实时预览图</div><div :style="previewStyle"><div :style="previews.div"><img :src="previews.url" :style="previews.img"></div></div></el-col></el-row></div>
</template><script>
import { VueCropper } from 'vue-cropper'export default {components: { VueCropper },data() {return {previews: {},previewStyle: {},option: {img: require("../assets/img/huihui.png"), // 裁剪图片的地址autoCrop: true, // 是否默认生成截图框  (默认:false)outputSize: 1, // 裁剪生成图片的质量  (默认:1)full: false, // 是否输出原图比例的截图 选true生成的图片会非常大  (默认:false)canMove: true, // 上传图片是否可以移动  (默认:true)// canMoveBox: false, // 截图框能否拖动  (默认:true)centerBox: true,//截图框是否被限制在图片里面  (默认:false)autoCropWidth: 200, // 默认生成截图框宽度  (默认:80%)autoCropHeight: 200, // 默认生成截图框高度  (默认:80%)fixedBox: true, // 固定截图框大小 不允许改变  (默认:false)fixed: true,//是否开启截图框宽高固定比例  (默认:false)// fixedNumber: [2, 1],//截图框宽高比例  [宽,高](默认[1:1])outputType: 'png' // 裁剪生成图片的格式 可选值 jpeg, png, webp},};},methods: {// 覆盖默认的上传行为requestUpload() {},// 上传预处理beforeUpload(file) {if (file.type.indexOf("image/") == -1) {this.$message.error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");} else {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {this.option.img = reader.result;};}},realTime(data) {  //实时预览this.previewStyle = {width: data.w + "px",height: data.h + "px",overflow: "hidden",margin: "0",borderRadius: "50%",}this.previews = data},finish() {  // 下载/上传 预览图let fileName = '裁剪图'this.$refs.cropper.getCropBlob((data) => { //获取截图的 blob 数据// 上传图片// this.uploadImg(data, fileName)// 下载图片let url = window.URL.createObjectURL(data)this.downloadIamge1(url, fileName)  //本地下载方法1// this.downloadIamge2(url, fileName)  //本地下载方法2});// this.$refs.cropper.getCropData(url => {  //获取截图的 base64 数据//   this.downloadIamge1(url, fileName)  //本地下载方法1//   // this.downloadIamge2(url, fileName)  //本地下载方法2// })},// 上传图片uploadImg(data, fileName) {let formData = new FormData();formData.append('file', data, fileName);// 上传到服务器// uploadAvatar(formData).then(rse => { })},downloadIamge1(url, fileName) {  // 下载图片let link = document.createElement('a')link.style.display = 'none'link.setAttribute('href', url)link.setAttribute('download', fileName)document.body.appendChild(link)link.click()document.body.removeChild(link) //下载完成移除元素window.URL.revokeObjectURL(url) //释放掉blob对象},downloadIamge2(imgsrc, fileName) {//下载图片let image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function () {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据let a = document.createElement("a"); // 生成一个a元素let event = new MouseEvent("click"); // 创建一个单击事件a.href = url; // 将生成的URL设置为a.href属性a.download = fileName; // 设置图片名称a.dispatchEvent(event); // 触发a的单击事件window.URL.revokeObjectURL(imgsrc) //释放掉blob对象};image.src = imgsrc;},// 向左旋转rotateLeft() {this.$refs.cropper.rotateLeft();},// 向右旋转rotateRight() {this.$refs.cropper.rotateRight();},// 图片缩放changeScale(num) {num = num || 1;this.$refs.cropper.changeScale(num);},},
};
</script><style>
.main {position: relative;
}
</style>

效果图

Vue图片裁剪插件vue-cropper的使用，应用场景用户上传头像相关推荐

vue 移动端头像裁剪_移动端上传头像并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...
小程序上传头像图片裁剪
原文链接:https://blog.csdn.net/qq_41049816/article/details/90604607* 给网上收到的不知道好不好用先收藏着: 小程序涉及到了用户上传头像的 ...
【vue+vue-cropper】好玩的图片裁剪插件vue-cropper，使用方法详解
先看效果图,这款插件挺有意思的,下面开始详细梳理一下过程当鼠标经过头像的时候会出现个加号,我们先把外层的需求处理好,然后再处理弹窗打开修改图片的部分父页面 <a-col :md=" ...
VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下效果图第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
vue图片裁剪固定尺寸/vue-cropper的使用
需求: 用户上传图片不符合大小,提供工具进行裁剪(类似上传头像一样处理) 解决: 使用vue-cropper插件完成插件官网: https://github.com/xyxiao001/vue-cr ...
vue+图片裁剪vue-cropper以及api
前言: 因为项目需要,需要实现一个上传完图片,对图片进行二次处理的需求,就使用了vue-cropper来实现这个功能,总的来说还是感觉非常不错的软件,这里分享下我的使用方法,以及vue-cropper ...
vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
vue 图片裁剪上传
最近写的一个项目用到头像上传,需要裁剪功能,缩放功能,能具备压缩上传功能,因为手机现在的像素太好了,随便一张图片的大小都上M了,而且要求手机端和pc端都可要可以使用.通过网上找到了一个合适的插件(vu ...

Vue图片裁剪插件vue-cropper的使用，应用场景用户上传头像

文章目录

前言

一、安装和引入

二、Events And Methods

三、简单使用

四、实际应用（含本地图片下载）

Vue图片裁剪插件vue-cropper的使用，应用场景用户上传头像相关推荐

最新文章

热门文章