這次帶給大家vue中如何使用cropperjs，vue中使用cropperjs的注意事項有哪些，以下就是實戰案例，一起來看一下。
用vue的專案裡需要對圖片進行裁剪，於是使用了cropperjs，在使用的過程中也踩過一些坑，以下是在.vue文件裡cropperjs的使用方法和經驗教訓總結：
在使用之前，先引入：
在專案裡，運行：
npm install cropperjs -save
登入後複製
在template裡：
<p>
<!-- 遮罩层 -->
</p><p>
</p><p>
<img alt="vue中使用cropperjs" >
</p>
<button>确定</button>
<p>
</p><p>
</p><p>
</p>
<p>
<input>
<label></label>
</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 <p style="text-align: left;"> </p><p style="text-align: left;"><span style="color: #ff0000"></span></p>#我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ <p></p>推薦閱讀：<p></p><p>怎麼實作微信web端後退強制刷新<a href="http://www.php.cn/js-tutorial-388955.html" target="_blank"></a></p><p>用js快速的取得html頁面中圖片的位址<a href="http://www.php.cn/js-tutorial-388951.html" target="_blank"></a><br></p><p>設定cookie過期自動更新與自動取得<a href="http://www.php.cn/js-tutorial-388941.html" target="_blank"></a><br>#</p>登入後複製
以上是vue中使用cropperjs的詳細內容。更多資訊請關注PHP中文網其他相關文章！
