Skip to content

M
marketing
Commit 18b93fd6 by 陈玉桐
Options

test新截图

parent f86751b7
Showing with 99 additions and 37 deletions
package-lock.json
......@@ -3641,8 +3641,7 @@
"de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
"dev": true
"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
},
"debug": {
"version": "4.1.1",
......@@ -4496,6 +4495,11 @@
"strip-eof": "1.0.0"
}
},
"exif-js": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz",
"integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ="
},
"expand-brackets": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
......@@ -5896,8 +5900,7 @@
"he": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
"hex-color-regex": {
"version": "1.1.0",
......@@ -11450,6 +11453,17 @@
"vue-style-loader": "4.1.2"
}
},
"vue-quick-cropper": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/vue-quick-cropper/-/vue-quick-cropper-1.0.0.tgz",
"integrity": "sha512-gQN7++KZhuiYNE7o+gflS3UWkclVetiuTtlpqs6aNPyw4G+bM345z77QDDE+lolIDm3bnqRkRSgk3pseYrWVrw==",
"requires": {
"babel-runtime": "6.26.0",
"exif-js": "2.3.0",
"vue": "2.6.10",
"vue-template-compiler": "2.6.10"
}
},
"vue-router": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",
......@@ -11469,7 +11483,6 @@
"version": "2.6.10",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",
"integrity": "sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==",
"dev": true,
"requires": {
"de-indent": "1.0.2",
"he": "1.2.0"
......
package.json
......@@ -15,6 +15,7 @@
"qs": "^6.9.0",
"vue": "^2.6.10",
"vue-cropper": "^0.4.9",
"vue-quick-cropper": "^1.0.0",
"vue-router": "^3.1.3",
"vue-waterfall2": "^1.9.4",
"vuex": "^3.0.1"
......
src/main.js
......@@ -10,6 +10,9 @@ Vue.use(waterfall)
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
import VueQuickCropper from 'vue-quick-cropper';
Vue.use(VueQuickCropper)
import setWechatTitle from './utils/setWechatTitle'
Vue.config.productionTip = false
......
src/views/tool.vue
<template>
<div id="tool">
<div class="cropper" v-if="cropperShow">
<vueCropper
<!-- <vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
......@@ -19,7 +19,16 @@
<div class="cropperOpt">
<span @click="cropperShow=false">取消</span>
<span @click="croppSure">完成</span>
</div> -->
<!-- <div class="main" v-if="visible"> -->
<div class="cropperOpt">
<div class="button" @click="confirm">使用</div>
<div class="button cancel" @click="cropperShow=false">取消</div>
</div>
<div class="content">
<quick-cropper ref="cropper" :img-src="imgSrc" @finish="finish"></quick-cropper>
</div>
<!-- </div> -->
</div>
<!-- 21天模板 -->
<div id="posterCon" class="posterCon_21" v-if="days==21||days==150">
......@@ -196,20 +205,21 @@ import loading from '../components/loading/loading.vue'
export default {
data() {
return{
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 剪切后的图片质量（0.1-1）
full: true, // 输出原图比例截图 props名full
outputType: 'png', // 裁剪生成额图片的格式
canMove: true, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高
canMoveBox: true, // 能否拖动截图框
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 150,
autoCropHeight: 150,
fixedBox: false // 截图框固定大小
},
// option: {
// img: '', // 裁剪图片的地址
// info: true, // 裁剪框的大小信息
// outputSize: 1, // 剪切后的图片质量（0.1-1）
// full: true, // 输出原图比例截图 props名full
// outputType: 'png', // 裁剪生成额图片的格式
// canMove: true, // 能否拖动图片
// original: false, // 上传图片是否显示原始宽高
// canMoveBox: true, // 能否拖动截图框
// autoCrop: true, // 是否默认生成截图框
// autoCropWidth: 150,
// autoCropHeight: 150,
// fixedBox: false // 截图框固定大小
// },
imgSrc: '',
cropperShow: false,
......@@ -336,14 +346,31 @@ export default {
})
},
methods: {
croppSure() {//裁剪完成
this.$refs.cropper.getCropData(data=>{
this.option.img = ''
this.previews = {}
this.uploadPic = data
// croppSure() {//裁剪完成
// this.$refs.cropper.getCropData(data=>{
// this.option.img = ''
// this.previews = {}
// this.uploadPic = data
// this.cropperShow = false
// })
// },
finish(base64,data){
console.log(base64,'图片base64')
console.log(data,'图片二进制')
this.uploadPic = base64
this.cropperShow = false
},
// 确定使用
confirm() {
this.$nextTick(() => {
// 确认截图
this.$refs.cropper.confirm()
})
},
// 取消
cancel(){
this.visible = false
},
create() {
// 使input失去焦点
......@@ -476,12 +503,12 @@ export default {
if (res.localData.substr(0, 5) != 'data:') {
// me.uploadPic = 'data:image;base64,' + res.localData
me.option.img = 'data:image;base64,' + res.localData
me.imgSrc = 'data:image;base64,' + res.localData
me.cropperShow = true
}else{
// me.uploadPic = res.localData // localData是图片的base64数据，可以用img标签显示
me.option.img = res.localData
me.imgSrc = res.localData
me.cropperShow = true
}
}
......@@ -564,17 +591,35 @@ export default {
bottom: 0;
z-index: 10000;
.cropperOpt{
position: absolute;
bottom: 0;
position: fixed;
top: 0;
right: 0;
height: 44px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
span{
color: #fff;
font-weight: 500;
padding: 15px 20px;
}
background: #303030;
.button {
float: right;
height: 44px;
line-height: 44px;
font-size: 14px;
margin-right: 15px;
color: green;
}
.cancel{
float:left;
margin-left:15px;
}
// position: absolute;
// bottom: 0;
// width: 100%;
// display: flex;
// justify-content: space-between;
// align-items: center;
// span{
// color: #fff;
// font-weight: 500;
// padding: 15px 20px;
// }
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment