Vue 使用 vue-cropper实现图片裁剪

最新推荐文章于 2024-09-26 17:19:38 发布

gooodi

最新推荐文章于 2024-09-26 17:19:38 发布

阅读量2.1k

点赞数

分类专栏： vue 记录 vue-cropper 文章标签： vue vue-cropper 图片裁剪

本文链接：https://blog.csdn.net/gooodi/article/details/97370167

版权

本文介绍了如何在Vue项目中使用vue-cropper组件来实现图片裁剪功能，包括npm安装步骤、关键代码实现及最终展示效果。

摘要由CSDN通过智能技术生成

1.安装vue-cropper

使用npm本地安装vue-cropper

npm install vue-cropper --save-dev

2.实现代码

<template>
	<div>
		<div>
			<div class="pos movediv" :style="cutPhotomodel?'z-index:10':'z-index:-5'">
				<div class="myheader">
					<div>选择图片</div>
					<div @click="colorcover"><img src="./images/关闭icon.png" alt=""></div>
				</div>
				<div class="mymodel">
					<div class="cropper">
						<vueCropper ref="cropper" :img="option.img?option.img:photosimg" :outputSize="option.size" :outputType="option.outputType"
						 :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original"
						 :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight"
						 :fixedBox="option.fixedBox" @realTime="realTime"></vueCropper>
					</div>
				</div>
				<div class="mydiv1">
					<div :style="previews.img">
						<img :src="previews.url">
					</div>
				</div>
				<div class="mydiv2">
					<div :style="previews.img">
						<img :src="previews.url">
					</div>
				</div>
				<div class="mydiv3">头像预览</div>
				<div class=&