1、移动裁剪组件 封装
安装插件
npm install cropperjs -save
<template>
<div id="demo">
<!-- 遮罩层 -->
<div class="container" v-show="panel">
<div>
<img id="image" :src="cutUrl" alt="Picture">
</div>
<button type="button" class="cancelBtn" @click="cancel">取消</button>
<button type="button" id="button" @click="crop">确定</button>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs'
export default {
components: {},
data() {
return {
panel:false,
cutUrl:'',
cropper: '',
croppable: false,
coverImg:'',
}
},
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: {
// init参数可用是图片的URL也可以是图片的file文件
// init(url){
// this.cutUrl = url;
init(cutFile){
this.cutUrl = this.getObjectURL(cutFile);
//每次替换图片要重新得到新的url
if (this.cropper) {
this.cropper.replace(this.cutUrl);
}
this.panel = true;
},
getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
let binaryData = [];
binaryData.push(file);
url = window.URL.createObjectURL(new Blob(binaryData));
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
},
cancel(){
this.panel = false;
},
crop() {
this.panel = false;
var croppedCanvas;
var roundedCanvas;
if (!this.croppable) {
return;
}
// Crop
croppedCanvas = this.cropper.getCroppedCanvas();
// Round
roundedCanvas = this.getRoundedCanvas(croppedCanvas);
this.coverImg = roundedCanvas.toDataURL();
// this.coverImg返回的是base64
this.$emit('callBackImg',this.coverImg)
},
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.moveTo(0, 0)
context.lineTo(0, width)
context.lineTo(width, width)
context.lineTo(width, 0)
context.lineTo(0, 0)
context.fill();
return canvas;
},
}
}
</script>
<style>
#demo #button {
position: absolute;
right: 10px;
bottom: 10px;
width: 2.4rem;
height: .8rem;
color: white;
font-size: .3rem;
border: none;
border-radius: 5px;
background: linear-gradient(180deg, #009FEC 0%, rgba(0, 159, 236, 0.64) 100%);
}
.cancelBtn{
position: absolute;
left: 10px;
bottom: 10px;
width: 2.4rem;
height: .8rem;
color: white;
font-size: .3rem;
border: none;
border-radius: 5px;
background: #6d6d6d;
}
#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/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;
}
</style>
引用组件
<cut-img ref="cutImgRef" @callBackImg="getCutImg"></cut-img>this.$refs.cutImgRef.init(url)//调用子组件的初始函数即可url可图片链接可file
2、PC端裁剪组件封装
npm install vue-cropper --save
<template>
<el-dialog :visible.sync="dilaogVisible" title="封面设置" width="600px">
<div class="cropper-content">
<div class="cropper">
<VueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:fixedBox="option.fixedBox"
/>
</div>
</div>
<el-row type="flex" justify="center" slot="footer">
<el-button @click="handelConfirm" class="button">设置为封面</el-button>
</el-row>
</el-dialog>
</template>
<script>
import {VueCropper} from 'vue-cropper'
export default {
components: {
VueCropper,
},
data() {
return {
dilaogVisible: false,
option: {
img: '', // 裁剪图片的地址
info: false, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
fixedBox: false, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [1, 1], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMoveBox: true, // 截图框能否拖动
original: true, // 上传图片按照原始比例渲染
centerBox: true, // 截图框是否被限制在图片里面
infoTrue: true, // true 为展示真实输
},
}
},
methods: {
init(url) { //接收的是URL地址
this.option.img = url
this.dilaogVisible = true
},
handelConfirm() {
this.$refs.cropper.getCropBlob(data => {
this.$emit('success', data)
this.dilaogVisible = false
})
},
},
}
</script>
<style lang="scss" scoped>
.cropper-content {
.cropper {
margin: 0 auto;
width: 500px;
height: 300px;
}
}
.button {
background: #00A2E9;
width: 200px;
height: 50px;
border: none;
border-radius: 25px;
color: white;
font-size: 20px;
}
</style>
父组件
<cut-img ref="cutImgRef" @success="getCutImg"></cut-img>this.$refs.cutImgRef.init(URL);//传过去一个URL地址