使用技術：
vue.js2.0、cropperjs、canvas
<template>
<div id=
"app"
>
<div id=
"demo"
>
<!-- 遮罩層 -->
<div class=
"container"
v-show=
"panel"
>
<div>
<img id=
"image"
:src=
"url"
alt=
"Picture"
>
</div>
<button type=
"button"
id=
"button"
@click=
"crop"
>確定</button>
</div>
<div style=
"padding:20px;"
>
<div class=
"show"
>
<div class=
"picture"
:style=
"'backgroundImage:url('+headerImage+')'"
>
</div>
</div>
<div style=
"margin-top:20px;"
>
<input type=
"file"
id=
"change"
accept=
"image"
@change=
"change"
>
<label
for
=
"change"
></label>
</div>
</div>
</div>
</div>
</template>
<script>
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 () {
//這邊寫圖片的上傳
}
}
}
</script>
<style>
*{
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
*
* 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;
|