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