You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
423 lines
13 KiB
423 lines
13 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
|
<title>test vue-cropper</title> |
|
<style> |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.cut { |
|
width: 500px; |
|
height: 500px; |
|
margin: 30px auto; |
|
} |
|
|
|
.c-item { |
|
max-width: 800px; |
|
margin: 10px auto; |
|
margin-top: 20px; |
|
} |
|
|
|
.content { |
|
margin: auto; |
|
max-width: 1200px; |
|
margin-bottom: 100px; |
|
} |
|
|
|
.test-button { |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-content: center; |
|
justify-content: center; |
|
} |
|
|
|
.btn { |
|
display: inline-block; |
|
line-height: 1; |
|
white-space: nowrap; |
|
cursor: pointer; |
|
background: #fff; |
|
border: 1px solid #c0ccda; |
|
color: #1f2d3d; |
|
text-align: center; |
|
box-sizing: border-box; |
|
outline: none; |
|
margin:20px 10px 0px 0px; |
|
padding: 9px 15px; |
|
font-size: 14px; |
|
border-radius: 4px; |
|
color: #fff; |
|
background-color: #50bfff; |
|
border-color: #50bfff; |
|
transition: all .2s ease; |
|
text-decoration: none; |
|
user-select: none; |
|
} |
|
|
|
.des { |
|
line-height: 30px; |
|
} |
|
|
|
code.language-html { |
|
padding: 10px 20px; |
|
margin: 10px 0px; |
|
display: block; |
|
background-color: #333; |
|
color: #fff; |
|
overflow-x: auto; |
|
font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono; |
|
border-radius: 5px; |
|
white-space: pre; |
|
} |
|
|
|
.show-info { |
|
margin-bottom: 50px; |
|
} |
|
|
|
.show-info h2 { |
|
line-height: 50px; |
|
} |
|
|
|
/*.title, .title:hover, .title-focus, .title:visited { |
|
color: black; |
|
}*/ |
|
|
|
.title { |
|
display: block; |
|
text-decoration: none; |
|
text-align: center; |
|
line-height: 1.5; |
|
margin: 20px 0px; |
|
background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db); |
|
color: transparent; |
|
-webkit-background-clip: text; |
|
background-size: 200% 100%; |
|
animation: slide 5s infinite linear; |
|
font-size: 40px; |
|
} |
|
|
|
.test { |
|
height: 500px; |
|
} |
|
|
|
.model { |
|
position: fixed; |
|
z-index: 10; |
|
width: 100vw; |
|
height: 100vh; |
|
overflow: auto; |
|
top: 0; |
|
left: 0; |
|
background: rgba(0, 0, 0, 0.8); |
|
} |
|
|
|
.model-show { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 100vw; |
|
height: 100vh; |
|
} |
|
|
|
.model img { |
|
display: block; |
|
margin: auto; |
|
max-width: 80%; |
|
user-select: none; |
|
background-position: 0px 0px, 10px 10px; |
|
background-size: 20px 20px; |
|
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%); |
|
} |
|
|
|
.c-item { |
|
display: block; |
|
user-select: none; |
|
} |
|
|
|
@keyframes slide { |
|
0% { |
|
background-position: 0 0; |
|
} |
|
100% { |
|
background-position: -100% 0; |
|
} |
|
} |
|
|
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="app"> |
|
<div class="model" v-show="model" @click="model = false"> |
|
<div class="model-show"> |
|
<img :src="modelSrc" alt=""> |
|
</div> |
|
</div> |
|
<p>例子</p> |
|
<div class="cut"> |
|
<vue-cropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType" :info="true" :full="option.full" |
|
:can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :original="option.original" |
|
:auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox" |
|
@real-time="realTime" :high="option.high" ></vue-cropper> |
|
</div> |
|
<div class="test-button"> |
|
<button @click="changeImg" class="btn">changeImg</button> |
|
<label class="btn" for="uploads">upload</label> |
|
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" |
|
@change="uploadImg($event, 1)"> |
|
<button @click="startCrop" v-if="!crap" class="btn">start</button> |
|
<button @click="stopCrop" v-else class="btn">stop</button> |
|
<button @click="clearCrop" class="btn">clear</button> |
|
<button @click="refreshCrop" class="btn">refresh</button> |
|
<button @click="changeScale(1)" class="btn">+</button> |
|
<button @click="changeScale(-1)" class="btn">-</button> |
|
<button @click="rotateLeft" class="btn">rotateLeft</button> |
|
<button @click="rotateRight" class="btn">rotateRight</button> |
|
<button @click="finish('base64')" class="btn">preview(base64)</button> |
|
<button @click="finish('blob')" class="btn">preview(blob)</button> |
|
<a @click="down('base64')" class="btn">download(base64)</a> |
|
<a @click="down('blob')" class="btn">download(blob)</a> |
|
<div style="display:block; width: 100%;"> |
|
<label class="c-item"> |
|
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span> |
|
<input type="checkbox" v-model="option.original"> |
|
<span>original: {{ option.original}}</span> |
|
</label> |
|
<label class="c-item"> |
|
<span>能否拖动图片</span> |
|
<input type="checkbox" v-model="option.canMove"> |
|
</label> |
|
<label class="c-item"> |
|
<span>能否拖动截图框</span> |
|
<input type="checkbox" v-model="option.canMoveBox"> |
|
<span>canMoveBox: {{ option.canMoveBox}}</span> |
|
</label> |
|
<label class="c-item"> |
|
<span>截图框固定大小</span> |
|
<input type="checkbox" v-model="option.fixedBox"> |
|
<span>fixedBox: {{ option.fixedBox}}</span> |
|
</label> |
|
<label class="c-item"> |
|
<span>是否输出原图比例的截图</span> |
|
<input type="checkbox" v-model="option.full"> |
|
<span>full: {{ option.full}}</span> |
|
</label> |
|
<label class="c-item"> |
|
<span>是否自动生成截图框</span> |
|
<input type="checkbox" v-model="option.autoCrop"> |
|
<span>autoCrop: {{ option.autoCrop}}</span> |
|
</label> |
|
<label class="c-item"> |
|
<span>是否根据dpr生成适合屏幕的高清图片</span> |
|
<input type="checkbox" v-model="option.high"> |
|
<span>high: {{ option.high}}</span> |
|
</label> |
|
<label class="c-item"> |
|
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span> |
|
<input type="checkbox" v-model="option.centerBox"> |
|
<span>centerBox: {{ option.centerBox}}</span> |
|
</label> |
|
<label class="c-item"> |
|
<p>输出图片格式</p> |
|
<label>jpg |
|
<input type="radio" name="type" value="jpeg" v-model="option.outputType"> |
|
</label> |
|
<label>png |
|
<input type="radio" name="type" value="png" v-model="option.outputType"> |
|
</label> |
|
<label>webp |
|
<input type="radio" name="type" value="webp" v-model="option.outputType"> |
|
</label> |
|
</label> |
|
</div> |
|
</div> |
|
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden', 'margin': '5px'}"> |
|
<div :style="previews.div"> |
|
<img :src="previews.url" :style="previews.img"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- <script src="https://vuejs.org/js/vue.min.js"></script> --> |
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> |
|
<script src="../dist/index.js"></script> |
|
<script> |
|
Vue.use(window['vue-cropper']) |
|
var a = new Vue({ |
|
el: '#app', |
|
data: { |
|
model: false, |
|
modelSrc: '', |
|
crap: false, |
|
previews: {}, |
|
lists: [ |
|
{ |
|
img: 'http://ofyaji162.bkt.clouddn.com/touxiang.jpg' |
|
}, |
|
{ |
|
img: 'https://o90cnn3g2.qnssl.com/0C3ABE8D05322EAC3120DDB11F9D1F72.png' |
|
}, |
|
{ |
|
img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg', |
|
}, |
|
{ |
|
img: 'http://ofyaji162.bkt.clouddn.com/bg2.jpg', |
|
}, |
|
{ |
|
img: 'http://ofyaji162.bkt.clouddn.com/can.jpg' |
|
}, |
|
{ |
|
img: 'http://ofyaji162.bkt.clouddn.com/nightcat.jpg' |
|
} |
|
], |
|
option: { |
|
img: 'https://avatars3.githubusercontent.com/u/15681693', |
|
size: 1, |
|
full: false, |
|
outputType: 'png', |
|
canMove: true, |
|
fixedBox: false, |
|
original: false, |
|
canMoveBox: true, |
|
autoCrop: true, |
|
// 只有自动截图开启 宽度高度才生效 |
|
autoCropWidth: 200, |
|
autoCropHeight: 150, |
|
centerBox: false, |
|
high: true |
|
}, |
|
show: true |
|
}, |
|
methods: { |
|
changeImg() { |
|
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img |
|
}, |
|
startCrop() { |
|
// start |
|
this.crap = true |
|
this.$refs.cropper.startCrop() |
|
}, |
|
stopCrop() { |
|
// stop |
|
this.crap = false |
|
this.$refs.cropper.stopCrop() |
|
}, |
|
clearCrop() { |
|
// clear |
|
this.$refs.cropper.clearCrop() |
|
}, |
|
refreshCrop() { |
|
// clear |
|
this.$refs.cropper.refresh() |
|
}, |
|
changeScale(num) { |
|
num = num || 1 |
|
this.$refs.cropper.changeScale(num) |
|
}, |
|
rotateLeft() { |
|
this.$refs.cropper.rotateLeft() |
|
}, |
|
rotateRight() { |
|
this.$refs.cropper.rotateRight() |
|
}, |
|
finish(type) { |
|
// 输出 |
|
// var test = window.open('about:blank') |
|
// test.document.body.innerHTML = '图片生成中..' |
|
if (type === 'blob') { |
|
this.$refs.cropper.getCropBlob((data) => { |
|
var img = window.URL.createObjectURL(data) |
|
this.model = true |
|
this.modelSrc = img |
|
}) |
|
} else { |
|
this.$refs.cropper.getCropData((data) => { |
|
this.model = true |
|
this.modelSrc = data |
|
}) |
|
} |
|
}, |
|
// 实时预览函数 |
|
realTime(data) { |
|
console.log(data) |
|
this.previews = data |
|
}, |
|
|
|
finish2(type) { |
|
this.$refs.cropper2.getCropData((data) => { |
|
this.model = true |
|
this.modelSrc = data |
|
}) |
|
}, |
|
finish3(type) { |
|
this.$refs.cropper3.getCropData((data) => { |
|
this.model = true |
|
this.modelSrc = data |
|
}) |
|
}, |
|
down(type) { |
|
// event.preventDefault() |
|
var aLink = document.createElement('a') |
|
aLink.download = 'demo' |
|
// 输出 |
|
if (type === 'blob') { |
|
this.$refs.cropper.getCropBlob((data) => { |
|
this.downImg = window.URL.createObjectURL(data) |
|
aLink.href = window.URL.createObjectURL(data) |
|
aLink.click() |
|
}) |
|
} else { |
|
this.$refs.cropper.getCropData((data) => { |
|
this.downImg = data |
|
aLink.href = data |
|
aLink.click() |
|
}) |
|
} |
|
}, |
|
|
|
uploadImg(e, num) { |
|
//上传图片 |
|
// this.option.img |
|
var file = e.target.files[0] |
|
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { |
|
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种') |
|
return false |
|
} |
|
var reader = new FileReader() |
|
reader.onload = (e) => { |
|
let data |
|
if (typeof e.target.result === 'object') { |
|
// 把Array Buffer转化为blob 如果是base64不需要 |
|
data = window.URL.createObjectURL(new Blob([e.target.result])) |
|
} else { |
|
data = e.target.result |
|
} |
|
if (num === 1) { |
|
this.option.img = data |
|
} else if (num === 2) { |
|
this.example2.img = data |
|
} |
|
} |
|
// 转化为base64 |
|
// reader.readAsDataURL(file) |
|
// 转化为blob |
|
reader.readAsArrayBuffer(file) |
|
}, |
|
imgLoad(msg) { |
|
console.log(msg) |
|
} |
|
}, |
|
mounted() { |
|
console.log(window['vue-cropper']) |
|
} |
|
}) |
|
</script> |
|
</body> |
|
|
|
</html> |