vue 移动端头像裁剪_vue移动端裁剪图片结合插件Cropper的使用实例代码

vue移动端裁剪图片结合插件Cropper的使用实例代码

2019-01-07

编程之家收集整理的这篇文章主要介绍了vue移动端裁剪图片结合插件Cropper的使用实例代码，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

导读热词

之前写了一个上传头像的功能模块，以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。

当然，使用就安装 npm install cropperjs

接着再引入import Cropper from 'cropperjs'

下面是源码

确定

@H_404_27@

*{

margin: 0;

padding: 0;

}

demo #button {

position: absolute;

right: 10px;

top: 10px;

width: 80px;

height: 40px;

border:none;

border-radius: 5px;

background:white;

}

demo .show {

width: 100px;

height: 100px;

overflow: hidden;

position: relative;

border-radius: 50%;

border: 1px solid #d5d5d5;

}

demo .picture {

width: 100%;

height: 100%;

overflow: hidden;

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

}

demo .container {

z-index: 99;

position: fixed;

padding-top: 60px;

left: 0;

top: 0;

right: 0;

bottom: 0;

background:rgba(0,1);

}

demo #image {

max-width: 100%;

}

.cropper-view-Box,.cropper-face {

border-radius: 50%;

}

/*!

Cropper.js v1.0.0-rc

Copyright (c) 2017 Fengyuan Chen

Released under the MIT license

Date: 2017-03-25T12:02:21.062Z

*/

.cropper-container {

font-size: 0;

line-height: 0;

position: relative;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

direction: ltr;

-ms-touch-action: none;

touch-action: none

}

.cropper-container img {

/Avoid margin top issue (Occur only when margin-top <= -height)/

display: block;

min-width: 0 !important;

max-width: none !important;

min-height: 0 !important;

max-height: none !important;

width: 100%;

height: 100%;

image-orientation: 0deg

}

.cropper-wrap-Box,.cropper-canvas,.cropper-drag-Box,.cropper-crop-Box,.cropper-modal {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

.cropper-wrap-Box {

overflow: hidden;

}

.cropper-drag-Box {

opacity: 0;

background-color: #fff;

}

.cropper-modal {

opacity: .5;

background-color: #000;

}

.cropper-view-Box {

display: block;

overflow: hidden;

width: 100%;

height: 100%;

outline: 1px solid #39f;

outline-color: rgba(51,153,255,0.75);

}

.cropper-dashed {

position: absolute;

display: block;

opacity: .5;

border: 0 dashed #eee

}

.cropper-dashed.dashed-h {

top: 33.33333%;

left: 0;

width: 100%;

height: 33.33333%;

border-top-width: 1px;

border-bottom-width: 1px

}

.cropper-dashed.dashed-v {

top: 0;

left: 33.33333%;

width: 33.33333%;

height: 100%;

border-right-width: 1px;

border-left-width: 1px

}

.cropper-center {

position: absolute;

top: 50%;

left: 50%;

display: block;

width: 0;

height: 0;

opacity: .75

}

.cropper-center:before,.cropper-center:after {

position: absolute;

display: block;

content: ' ';

background-color: #eee

}

.cropper-center:before {

top: 0;

left: -3px;

width: 7px;

height: 1px

}

.cropper-center:after {

top: -3px;

left: 0;

width: 1px;

height: 7px

}

.cropper-face,.cropper-line,.cropper-point {

position: absolute;

display: block;

width: 100%;

height: 100%;

opacity: .1;

}

.cropper-face {

top: 0;

left: 0;

background-color: #fff;

}

.cropper-line {

background-color: #39f

}

.cropper-line.line-e {

top: 0;

right: -3px;

width: 5px;

cursor: e-resize

}

.cropper-line.line-n {

top: -3px;

left: 0;

height: 5px;

cursor: n-resize

}

.cropper-line.line-w {

top: 0;

left: -3px;

width: 5px;

cursor: w-resize

}

.cropper-line.line-s {

bottom: -3px;

left: 0;

height: 5px;

cursor: s-resize

}

.cropper-point {

width: 5px;

height: 5px;

opacity: .75;

background-color: #39f

}

.cropper-point.point-e {

top: 50%;

right: -3px;

margin-top: -3px;

cursor: e-resize

}

.cropper-point.point-n {

top: -3px;

left: 50%;

margin-left: -3px;

cursor: n-resize

}

.cropper-point.point-w {

top: 50%;

left: -3px;

margin-top: -3px;

cursor: w-resize

}

.cropper-point.point-s {

bottom: -3px;

left: 50%;

margin-left: -3px;

cursor: s-resize

}

.cropper-point.point-ne {

top: -3px;

right: -3px;

cursor: ne-resize

}

.cropper-point.point-nw {

top: -3px;

left: -3px;

cursor: nw-resize

}

.cropper-point.point-sw {

bottom: -3px;

left: -3px;

cursor: sw-resize

}

.cropper-point.point-se {

right: -3px;

bottom: -3px;

width: 20px;

height: 20px;

cursor: se-resize;

opacity: 1

}

@media (min-width: 768px) {

.cropper-point.point-se {

width: 15px;

height: 15px

}

}

@media (min-width: 992px) {

.cropper-point.point-se {

width: 10px;

height: 10px

}

}

@media (min-width: 1200px) {

.cropper-point.point-se {

width: 5px;

height: 5px;

opacity: .75

}

}

.cropper-point.point-se:before {

position: absolute;

right: -50%;

bottom: -50%;

display: block;

width: 200%;

height: 200%;

content: ' ';

opacity: 0;

background-color: #39f

}

.cropper-invisible {

opacity: 0;

}

.cropper-bg {

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMzTjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');

}

.cropper-hide {

position: absolute;

display: block;

width: 0;

height: 0;

}

.cropper-hidden {

display: none !important;

}

.cropper-move {

cursor: move;

}

.cropper-crop {

cursor: crosshair;

}

.cropper-disabled .cropper-drag-Box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point {

cursor: not-allowed;

}