用vue的项目里需要对图片进行裁剪，于是使用了cropperjs，在使用的过程中也踩过一些坑，以下是在.vue文件里cropperjs的使用方法和经验教训总结：
在使用之前，先引入：
在项目里，运行：
npm install cropperjs -save
在template里：
<p id="demo">
<!-- 遮罩层 -->
<p class="container" v-show="panel">
<p>
<img id="image" :src="url" alt="picture">
</p>
<button type="button" id="button" @click="crop">确定</button>
</p>
<p style="padding:20px;">
<p class="show">
<p class="picture" :style="'backgroundimage:url('+headerimage+')'">
</p>
</p>
<p style="margin-top:20px;">
<input type="file" id="change" accept="image" @change="change">
<label for="change"></label>
</p>
</p>
</p>
js代码：
import cropper from 'cropperjs'
export default {
components: {
},
data () {
return {
headerimage:'',
picvalue:'',
cropper:'',
croppable:false,
panel:false,
url:''
}
},
mounted () {
//初始化这个裁剪框
var self = this;
var image = document.getelementbyid('image');
this.cropper = new cropper(image, {
aspectratio: 1,
viewmode: 1,
background:false,
zoomable:false,
ready: function () {
self.croppable = true;
}
});
},
methods: {
getobjecturl (file) {
var url = null ;
if (window.createobjecturl!=undefined) { // basic
url = window.createobjecturl(file) ;
} else if (window.url!=undefined) { // mozilla(firefox)
url = window.url.createobjecturl(file) ;
} else if (window.webkiturl!=undefined) { // webkit or chrome
url = window.webkiturl.createobjecturl(file) ;
}
return url ;
},
change (e) {
let files = e.target.files || e.datatransfer.files;
if (!files.length) return;
this.panel = true;
this.picvalue = files[0];
this.url = this.getobjecturl(this.picvalue);
//每次替换图片要重新得到新的url
if(this.cropper){
this.cropper.replace(this.url);
}
this.panel = true;
},
crop () {
this.panel = false;
var croppedcanvas;
var roundedcanvas;
if (!this.croppable) {
return;
}
// crop
croppedcanvas = this.cropper.getcroppedcanvas();
console.log(this.cropper)
// round
roundedcanvas = this.getroundedcanvas(croppedcanvas);
this.headerimage = roundedcanvas.todataurl();
this.postimg()
},
getroundedcanvas (sourcecanvas) {
var canvas = document.createelement('canvas');
var context = canvas.getcontext('2d');
var width = sourcecanvas.width;
var height = sourcecanvas.height;
canvas.width = width;
canvas.height = height;
context.imagesmoothingenabled = true;
context.drawimage(sourcecanvas, 0, 0, width, height);
context.globalcompositeoperation = 'destination-in';
context.beginpath();
context.arc(width / 2, height / 2, math.min(width, height) / 2, 0, 2 * math.pi, true);
context.fill();
return canvas;
},
postimg () {
//这边写图片的上传
}
}
}
整体效果：
css代码（比较长，本来想不贴上了，但是为了一下童鞋可以直接运行demo，还是贴上了，篇幅过长，望见谅）：
*{
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,0,0,1);
}
#demo #image {
max-width: 100%;
}
.cropper-view-box,.cropper-face {
border-radius: 50%;
}
/*!
* cropper.js v1.0.0-rc
* https://github.com/fengyuanchen/cropperjs
*
* 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/gaaaablbmvexmzmz////tjrv2aaaacxbiwxmaaarraaak6wgciw1aaaaahhrfwhrtb2z0d2fyzqbbzg9izsbgaxjld29ya3mgq1m26lyyjaaaabfjrefucjlj+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;
}
整体图：
把以上这些代码放入你的项目，或者单独建个.vue放进项目，就可以实现这样的效果：
以上就是vue中如何使用cropperjs的详细内容。