文章目录

前言一、安装和引入二、Events And Methods三、简单使用四、实际应用（含本地图片下载）

前言

一个简单的用户上传头像的例子

功能：选择图片，设置裁剪位置，实时预览

一、安装和引入

安装

//npm安装npm install vue-cropper

引入

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

二、Events And Methods

Events

Methods

通过 this.$refs.cropper 调用

组件更多的属性和方法见文档 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>

效果图