乡村相册
This commit is contained in:
yanran200730
@@ -1,29 +1,106 @@
|
||||
<template>
|
||||
<div class="photo">
|
||||
<image mode="aspectFit" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
|
||||
<div class="photo" ref="waterMarker" :class="[isHide ? 'home-active' : '']" :style="{height: height + 'px'}">
|
||||
<div class="photo-top" data-html2canvas-ignore>
|
||||
<image src="./images/gengduo1.png" />
|
||||
<div class="photo-top__middle">
|
||||
<span>保存至：默认相册</span>
|
||||
<image src="./images/gengduo1.png" />
|
||||
</div>
|
||||
<span @click="save">保存</span>
|
||||
</div>
|
||||
<image
|
||||
mode="aspectFit"
|
||||
crossorigin="anonymous"
|
||||
src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
|
||||
<div class="watermark">
|
||||
<component :is="'Watermark' + (currIndex + 1)"></component>
|
||||
</div>
|
||||
<div class="photo-bottom" v-if="!isHide">
|
||||
<div class="photo-bottom__top">
|
||||
<image src="./images/gengduo1.png" />
|
||||
<h2>水印</h2>
|
||||
<span>确定</span>
|
||||
</div>
|
||||
<div class="waterlist">
|
||||
<div
|
||||
class="water-item"
|
||||
:class="[currIndex === index ? 'active' : '']"
|
||||
v-for="(item, index) in config"
|
||||
:key="index"
|
||||
@click="currIndex = index">
|
||||
<image :src="item.thum" mode="aspectFill" />
|
||||
<div class="water-item__bottom">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<image class="newImg" @click="waterSrc = ''" :src="waterSrc" v-if="waterSrc" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
import Watermark1 from './components/watermark/Watermark1'
|
||||
import Watermark2 from './components/watermark/Watermark2'
|
||||
import Watermark3 from './components/watermark/Watermark3'
|
||||
import Watermark4 from './components/watermark/Watermark4'
|
||||
import Watermark5 from './components/watermark/Watermark5'
|
||||
import Watermark6 from './components/watermark/Watermark6'
|
||||
import Watermark7 from './components/watermark/Watermark7'
|
||||
import Watermark8 from './components/watermark/Watermark8'
|
||||
|
||||
import { config } from './config'
|
||||
export default {
|
||||
name: 'Watermark',
|
||||
|
||||
appName: '水印相机',
|
||||
|
||||
components: {
|
||||
Watermark1,
|
||||
Watermark2,
|
||||
Watermark3,
|
||||
Watermark4,
|
||||
Watermark5,
|
||||
Watermark6,
|
||||
Watermark7,
|
||||
Watermark8
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
src: '',
|
||||
config,
|
||||
currIndex: 0,
|
||||
isHide: false,
|
||||
height: '100%',
|
||||
waterSrc: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
this.height = uni.getSystemInfoSync().windowHeight
|
||||
},
|
||||
|
||||
methods: {
|
||||
back () {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
save () {
|
||||
this.isHide = true
|
||||
console.log(this.$refs.waterMarker.offsetHeight)
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
html2canvas(this.$refs.waterMarker, {
|
||||
allowTaint: true,
|
||||
useCORS: true,
|
||||
backgroundColor: '#fff',
|
||||
width: this.$refs.waterMarker.offsetWidth,
|
||||
height: this.$refs.waterMarker.offsetHeight,
|
||||
scale: 1
|
||||
}).then((canvas) => {
|
||||
let dataURL = canvas.toDataURL("image/png");
|
||||
this.waterSrc = dataURL
|
||||
console.log(dataURL)
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}, 2000)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -34,8 +111,163 @@
|
||||
.photo {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
height: 800px;
|
||||
background: #444;
|
||||
overflow: hidden;
|
||||
|
||||
.newImg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 11111;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.watermark {
|
||||
position: fixed;
|
||||
left: 32px;
|
||||
bottom: 512px;
|
||||
z-index: 111;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.photo-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 474px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32px 32px 0px 0px;
|
||||
|
||||
.waterlist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: calc(100% - 96px);
|
||||
padding: 18px 16px;
|
||||
overflow-y: auto;
|
||||
|
||||
.water-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 352px;
|
||||
height: 240px;
|
||||
margin-bottom: 16px;
|
||||
background: #2A3540;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
border: 6px solid #408EF6;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 176px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.water-item__bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-bottom__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 96px;
|
||||
padding: 0 32px;
|
||||
|
||||
image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 32px;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-top {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
padding: 0 32px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
& > image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #cbcbcb;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.photo-top__middle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 336px;
|
||||
height: 72px;
|
||||
background: #0B111F;
|
||||
border-radius: 40px;
|
||||
font-size: 28px;
|
||||
color: #cbcbcb;
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.home-active {
|
||||
.photo-bottom {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.watermark {
|
||||
bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
& > image {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user