Skip to content

W
wechat_baking
Commit e12f7f84 by huahua
Options

提交

parent 1bacd920
Showing with 869 additions and 402 deletions
pages/index/components/textsettings.vue
<template>
<view>
<view style="position: fixed;width: 100%" :style="{bottom: inputBottom+'px'}">
<view v-if="show && text != 'typeface'" style="width: 100%; height: 95upx; display: flex; flex-direction: row; ">
<view style="width: 280upx; height: 100%; background: #292933; border-top-right-radius: 60upx;display: flex; flex-direction: row; ">
<image v-if="bg_text_color" style="width: 47upx; height: 47upx; display: block;margin-top: 45upx; margin-left:45upx;"
src="../../../static/img/icon_qiehuan_on.png"
mode="aspectFill" @click="bgtextcolor"></image>
<image v-else style="width: 47upx; height: 47upx; display: block;margin-top: 45upx; margin-left:45upx;"
src="../../../static/img/icon_qiehuan.png"
mode="aspectFill" @click="bgtextcolor"></image>
<view style="width: 80upx; margin-top: 50upx;margin-left: 50upx;" @click="typefaceshow('share')">
<text style="font-size: 34upx; color: #FFFFFF;">字体</text>
</view>
<view v-if="show && text != 'typeface'"
style="width: 100%; height: 95upx; display: flex; flex-direction: row; ">
<view
style="width: 280upx; height: 100%; background: #292933; border-top-right-radius: 60upx;display: flex; flex-direction: row; ">
<image v-if="bg_text_color"
style="width: 47upx; height: 47upx; display: block;margin-top: 45upx; margin-left:45upx;"
src="../../../static/img/icon_qiehuan_on.png" mode="aspectFill" @click="bgtextcolor"></image>
<image v-else
style="width: 47upx; height: 47upx; display: block;margin-top: 45upx; margin-left:45upx;"
src="../../../static/img/icon_qiehuan.png" mode="aspectFill" @click="bgtextcolor"></image>
<view style="width: 80upx; margin-top: 50upx;margin-left: 50upx;" @click="typefaceshow('share')">
<text style="font-size: 34upx; color: #FFFFFF;">字体</text>
</view>
</view>
</view>
</view>
<view style="width: 100% ;background: #292933;">
<!-- 字体 -->
<view v-if="show && text != 'typeface'" style="display: flex;align-items: center; justify-items: center; border-bottom: 2upx solid #000000;
<view style="width: 100% ;background: #292933;">
<!-- 字体 -->
<view v-if="show && text != 'typeface'" style="display: flex;align-items: center; justify-items: center; border-bottom: 2upx solid #000000;
height: 98upx; ">
<view style="width: 601upx; height: 57upx; background: rgb(255,255,255,0.1); margin: 21upx 41upx 21upx 21upx; border-radius: 10upx;">
<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73" :adjust-position="false"
type="text" maxlength="22" @input="textInput" v-model="data.currentText" @focus="focusTextarea" @blur="blurTextarea"
placeholder="请输入文字内容..." style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
<view
style="width: 601upx; height: 57upx; background: rgb(255,255,255,0.1); margin: 21upx 41upx 21upx 21upx; border-radius: 10upx;">
<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73"
:adjust-position="false" type="text" maxlength="24" @input="textInput"
@focus="focusTextarea" @blur="blurTextarea"
v-model="data.currentText" placeholder="请输入文字内容..."
style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
</view>
<view style="width: 1px; height: 28upx; background: #FFFFFF;"></view>
<image style="width: 43upx; height: 30upx; display: block;margin: auto;"
src="../../../static/icon/icon_determine.png" mode="aspectFill" @click="cancel('share')">
</image>
</view>
<view style="width: 1px; height: 28upx; background: #FFFFFF;"></view>
<image style="width: 43upx; height: 30upx; display: block;margin: auto;" src="../../../static/icon/icon_determine.png"
mode="aspectFill" @click="cancel('share')"></image>
</view>
<view v-if="text == 'typeface'" style="border-bottom: 2upx solid #000000;">
<scroll-view style="width: calc(100% - 40upx); margin: auto; height:598upx; overflow: hidden;" scroll-y scroll-with-animation >
<view v-for="(item, index) in typefacedata"
:style="{'font-family':item.textlong == true ? item.key : item.key + 'ttf','color': data.itemList[data.cidx].font_dict_id == item.id ? '#F56364 !important' : 'none'}"
@click="typefaceClick(item, index)"
:key="index" style="font-size: 36upx; color: #FFFFFF; padding:22upx 0 21upx; text-align: center;">
<text style="font-size: 20upx;" >
<text style="font-size: 32upx;"
:style="{'color': data.itemList[data.cidx].font_dict_id == item.id ? '#F56364 !important' : '#ffffff'}">
色彩公园
</text>
<text v-if="item.remark != ''">
{{item.long == true ? '' : '(点击加载)'}}
</text>
<text v-if="item.remark != ''" style="color: #F56364;">
{{item.textlong == false ? '(下载失败,点击重新下载)' : ''}}
<view v-if="text == 'typeface'" style="border-bottom: 2upx solid #000000;">
<scroll-view style="width: calc(100% - 40upx); margin: auto; height:598upx; overflow: hidden;"
scroll-y scroll-with-animation>
<view v-for="(item, index) in typefacedata"
:style="{'font-family':item.textlong == true ? item.key : item.key + 'ttf','color': data.itemList[data.cidx].font_dict_id == item.id ? '#F56364 !important' : 'none'}"
@click="typefaceClick(item, index)" :key="index"
style="font-size: 36upx; color: #FFFFFF; padding:22upx 0 21upx; text-align: center;">
<!-- 色彩公园 {{item.title}} color: item.textlong == true ? '#ffffff' : '#BEBEBE'-->
<text style="font-size: 20upx;">
<text style="font-size: 32upx;"
:style="{'color': data.itemList[data.cidx].font_dict_id == item.id ? '#F56364 !important' : '#ffffff'}">
色彩公园
</text>
<text v-if="item.remark != ''">
{{item.long == true ? '' : '(点击加载)'}}
</text>
<text v-if="item.remark != ''" style="color: #F56364;">
{{item.textlong == false ? '(下载失败,点击重新下载)' : ''}}
</text>
</text>
</text>
</view>
</scroll-view>
</view>
<view v-if="show && text != 'typeface'" style="display: flex; height: 100upx; padding: 38upx 0 41upx; align-items: center;">
<!-- 颜色 开始-->
<scroll-view style="box-sizing: border-box; white-space: nowrap;
margin-left: 35upx; margin-right: 35upx;margin-bottom: 30upx; margin-top: 40upx; width: calc(100% - 70upx);" scroll-x
scroll-with-animation>
<view style="text-align: center; display: inline-block; padding-left: 20upx;"
v-for="(item,index) in colorList" :key="index" @click.stop="workcolor(item.color)">
<view v-if="data.itemList[data.cidx]">
<view v-if="data.itemList[data.cidx].font_color == item.color && !bg_text_color"
style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #854AC2; border-radius: 50%;"
:style="{background:item.color}"></view>
<view
v-else-if="data.itemList[data.cidx].under_color == item.color && bg_text_color"
style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #854AC2; border-radius: 50%;"
:style="{background:item.color}"></view>
<view v-else style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #ffffff; border-radius: 50%;"
</view>
</scroll-view>
</view>
<view v-if="show && text != 'typeface'"
style="display: flex; height: 100upx; padding: 38upx 0 41upx; align-items: center;">
<!-- 颜色 开始-->
<scroll-view style="box-sizing: border-box; white-space: nowrap;
margin-left: 35upx; margin-right: 35upx;margin-bottom: 30upx; margin-top: 40upx; width: calc(100% - 70upx);"
scroll-x scroll-with-animation>
<view style="text-align: center; display: inline-block; padding-left: 20upx;"
v-for="(item,index) in colorList" :key="index" @click.stop="workcolor(item.color)">
<view v-if="data.itemList[data.cidx]">
<view v-if="data.itemList[data.cidx].font_color == item.color && !bg_text_color"
style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #854AC2; border-radius: 50%;"
:style="{background:item.color}"></view>
<view v-else-if="data.itemList[data.cidx].under_color == item.color && bg_text_color"
style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #854AC2; border-radius: 50%;"
:style="{background:item.color}"></view>
<view v-else
style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #ffffff; border-radius: 50%;"
:style="{background:item.color}"></view>
</view>
<view v-else
style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #ffffff; border-radius: 50%;"
:style="{background:item.color}"></view>
</view>
<view v-else style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #ffffff; border-radius: 50%;"
:style="{background:item.color}"></view>
</view>
</scroll-view>
<!-- 颜色 结束-->
</scroll-view>
<!-- 字体 -->
</view>
<view v-if="!show" style="position: absolute; bottom: 100upx; width: 100%; background: #292933;">
<!-- 修改 -->
<view v-if="text == 'modify'"
style="display: flex;align-items: center; justify-items: center; border-bottom: 1upx solid #000000;
</view>
<view v-if="!show" style="position: absolute; bottom: 100upx; width: 100%; background: #292933;">
<!-- 修改 -->
<view v-if="text == 'modify'" style="display: flex;align-items: center; justify-items: center; border-bottom: 1upx solid #000000;
height: 99upx;">
<view style="width: 710upx; height: 57upx; background: rgb(255,255,255,0.1); margin: 20upx 40upx 20upx 20upx; border-radius: 10upx;">
<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73" :adjust-position="false"
type="text" maxlength="32" @input="textInput" v-model="data.currentText" @focus="focusTextarea" @blur="blurTextarea"
placeholder="请输入文字内容..." style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
<view
style="width: 710upx; height: 57upx; background: rgb(255,255,255,0.1); margin: 20upx 40upx 20upx 20upx; border-radius: 10upx;">
<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73"
:adjust-position="false" type="text" maxlength="32" @input="textInput"
@focus="focusTextarea" @blur="blurTextarea" v-model="data.currentText"
placeholder="请输入文字内容..."
style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
</view>
</view>
</view>
<!-- 字体 -->
<view v-if="text == 'typeface'" style="border-bottom: 1upx solid #000000;">
<scroll-view style="width: calc(100% - 40upx); margin: auto; height:300upx; overflow: hidden;" scroll-y scroll-with-animation >
<view v-for="(item, index) in textlist"
:style="{'font-family': item.fontname,'color': data.itemList[data.cidx].font_family == item.fontname ? '#F56364' : 'none'}"
@click="typefaceClick(item,index)"
:key="index" style="font-size: 40upx; color: #FFFFFF; margin: 10upx;">
{{item.text}}
<text style="font-size: 20upx; color: #F56364;">{{item.textlong ? '' : '(该字体加载失败)'}}</text>
</view>
</scroll-view>
</view>
<!-- 颜色 -->
<view v-if="text == 'color'" style="display: flex; height: 68upx; padding: 38upx 0 41upx;border-bottom: 1upx solid #000000;">
<!-- 背景 -->
<view style="width: calc(100% / 7);" @click="bgtextcolor">
<image style="width: 69upx; height: 69upx; display: block;margin: auto;" :src="bg_text_color ? '../../../static/icon/icon_qiehuan_one.png' : '../../../static/icon/icon_qiehuan.png'"
mode="aspectFill"></image>
<!-- 字体 -->
<view v-if="text == 'typeface'" style="border-bottom: 1upx solid #000000;">
<scroll-view style="width: calc(100% - 40upx); margin: auto; height:300upx; overflow: hidden;"
scroll-y scroll-with-animation>
<view v-for="(item, index) in textlist"
:style="{'font-family': item.fontname,'color': data.itemList[data.cidx].font_family == item.fontname ? '#F56364' : 'none'}"
@click="typefaceClick(item,index)" :key="index"
style="font-size: 40upx; color: #FFFFFF; margin: 10upx;">
{{item.text}}
<text
style="font-size: 20upx; color: #F56364;">{{item.textlong ? '' : '(该字体加载失败)'}}</text>
</view>
</scroll-view>
</view>
<!-- 颜色 -->
<view style="width: calc(100% / 7);" @click.stop="workcolor('#000000')">
<view v-if="data.itemList[data.cidx].font_color == '#000000' && !bg_text_color" style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else-if="data.itemList[data.cidx].under_color == '#000000' && bg_text_color" style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else style="width: 68upx; height: 68upx; background: #000000; border-radius: 50%;"></view>
</view>
<view style="width: calc(100% / 7);" @click.stop="workcolor('#FFFFFF')">
<view v-if="data.itemList[data.cidx].font_color == '#FFFFFF' && !bg_text_color" style="width: 60upx; height: 60upx; background: #FFFFFF; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else-if="data.itemList[data.cidx].under_color == '#FFFFFF' && bg_text_color" style="width: 60upx; height: 60upx; background: #FFFFFF; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else style="width: 68upx; height: 68upx; background: #FFFFFF; border-radius: 50%;"></view>
</view>
<view style="width: calc(100% / 7);" @click.stop="workcolor('#E60012')">
<view v-if="data.itemList[data.cidx].font_color == '#E60012' && !bg_text_color" style="width: 60upx; height: 60upx; background: #E60012; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else-if="data.itemList[data.cidx].under_color == '#E60012' && bg_text_color" style="width: 60upx; height: 60upx; background: #E60012; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else style="width: 68upx; height: 68upx; background: #E60012; border-radius: 50%;"></view>
</view>
<view style="width: calc(100% / 7);" @click.stop="workcolor('#060CDE')">
<view v-if="data.itemList[data.cidx].font_color == '#060CDE' && !bg_text_color" style="width: 60upx; height: 60upx; background: #060CDE; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else-if="data.itemList[data.cidx].under_color == '#060CDE' && bg_text_color" style="width: 60upx; height: 60upx; background: #060CDE; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else style="width: 68upx; height: 68upx; background: #060CDE; border-radius: 50%;"></view>
</view>
<view style="width: calc(100% / 7);" @click.stop="workcolor('#E65C00')">
<view v-if="data.itemList[data.cidx].font_color == '#E65C00' && !bg_text_color" style="width: 60upx; height: 60upx; background: #E65C00; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else-if="data.itemList[data.cidx].under_color == '#E65C00' && bg_text_color" style="width: 60upx; height: 60upx; background: #E65C00; border: 4upx solid #EF6262; border-radius: 50%;"></view>
<view v-else style="width: 68upx; height: 68upx; background: #E65C00; border-radius: 50%;"></view>
</view>
<!-- 加粗 -->
<view style="width: calc(100% / 7);" @click.stop='workweight'>
<view v-if="data.itemList[data.cidx].font_style != 'bold'" style="width: 68upx; height: 68upx; text-align: center; background: #282A32; border-radius: 5px;">
<text style="font-size: 34upx; font-weight: 800; color: #666666; line-height: 68upx;">B</text>
<view v-if="text == 'color'"
style="display: flex; height: 68upx; padding: 38upx 0 41upx;border-bottom: 1upx solid #000000;">
<!-- 背景 -->
<view style="width: calc(100% / 7);" @click="bgtextcolor">
<image style="width: 69upx; height: 69upx; display: block;margin: auto;"
:src="bg_text_color ? '../../../static/icon/icon_qiehuan_one.png' : '../../../static/icon/icon_qiehuan.png'"
mode="aspectFill"></image>
</view>
<!-- 颜色 -->
<view style="width: calc(100% / 7);" @click.stop="workcolor('#000000')">
<view v-if="data.itemList[data.cidx].font_color == '#000000' && !bg_text_color"
style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else-if="data.itemList[data.cidx].under_color == '#000000' && bg_text_color"
style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else style="width: 68upx; height: 68upx; background: #000000; border-radius: 50%;">
</view>
</view>
<view style="width: calc(100% / 7);" @click.stop="workcolor('#FFFFFF')">
<view v-if="data.itemList[data.cidx].font_color == '#FFFFFF' && !bg_text_color"
style="width: 60upx; height: 60upx; background: #FFFFFF; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else-if="data.itemList[data.cidx].under_color == '#FFFFFF' && bg_text_color"
style="width: 60upx; height: 60upx; background: #FFFFFF; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else style="width: 68upx; height: 68upx; background: #FFFFFF; border-radius: 50%;">
</view>
</view>
<view style="width: calc(100% / 7);" @click.stop="workcolor('#E60012')">
<view v-if="data.itemList[data.cidx].font_color == '#E60012' && !bg_text_color"
style="width: 60upx; height: 60upx; background: #E60012; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else-if="data.itemList[data.cidx].under_color == '#E60012' && bg_text_color"
style="width: 60upx; height: 60upx; background: #E60012; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else style="width: 68upx; height: 68upx; background: #E60012; border-radius: 50%;">
</view>
</view>
<view style="width: calc(100% / 7);" @click.stop="workcolor('#060CDE')">
<view v-if="data.itemList[data.cidx].font_color == '#060CDE' && !bg_text_color"
style="width: 60upx; height: 60upx; background: #060CDE; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else-if="data.itemList[data.cidx].under_color == '#060CDE' && bg_text_color"
style="width: 60upx; height: 60upx; background: #060CDE; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else style="width: 68upx; height: 68upx; background: #060CDE; border-radius: 50%;">
</view>
</view>
<view v-else style="width: 68upx; height: 68upx; text-align: center; background: #F56364; border-radius: 5px;">
<text style="font-size: 34upx; font-weight: 800; color: #fff; line-height: 68upx;">B</text>
<view style="width: calc(100% / 7);" @click.stop="workcolor('#E65C00')">
<view v-if="data.itemList[data.cidx].font_color == '#E65C00' && !bg_text_color"
style="width: 60upx; height: 60upx; background: #E65C00; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else-if="data.itemList[data.cidx].under_color == '#E65C00' && bg_text_color"
style="width: 60upx; height: 60upx; background: #E65C00; border: 4upx solid #EF6262; border-radius: 50%;">
</view>
<view v-else style="width: 68upx; height: 68upx; background: #E65C00; border-radius: 50%;">
</view>
</view>
<!-- 加粗 -->
<view style="width: calc(100% / 7);" @click.stop='workweight'>
<view v-if="data.itemList[data.cidx].font_style != 'bold'"
style="width: 68upx; height: 68upx; text-align: center; background: #282A32; border-radius: 5px;">
<text
style="font-size: 34upx; font-weight: 800; color: #666666; line-height: 68upx;">B</text>
</view>
<view v-else
style="width: 68upx; height: 68upx; text-align: center; background: #F56364; border-radius: 5px;">
<text
style="font-size: 34upx; font-weight: 800; color: #fff; line-height: 68upx;">B</text>
</view>
</view>
</view>
</view>
</view>
<!-- 切换 -->
<view v-if="!show" class="tooltextone">
<view style="width: calc(100% - 125upx);display: flex; justify-content: center;">
<view class="tooltext_li"@click="modify('modify')">
<image style="width: 50upx; height: 50upx; display: block;margin: auto;" src="../../../static/icon/diy_icon_editor_default.png"
mode=""></image>
<view class="tooltext_li_text">修改</view>
</view>
<view class="tooltext_li" @click="color('color')">
<image style="width: 50upx; height: 50upx; display: block;margin: auto;" src="../../../static/icon/replace.png"
mode=""></image>
<view class="tooltext_li_text">颜色</view>
<!-- 切换 -->
<view v-if="!show" class="tooltextone">
<view style="width: calc(100% - 125upx);display: flex; justify-content: center;">
<view class="tooltext_li" @click="modify('modify')">
<image style="width: 50upx; height: 50upx; display: block;margin: auto;"
src="../../../static/icon/diy_icon_editor_default.png" mode=""></image>
<view class="tooltext_li_text">修改</view>
</view>
<view class="tooltext_li" @click="color('color')">
<image style="width: 50upx; height: 50upx; display: block;margin: auto;"
src="../../../static/icon/replace.png" mode=""></image>
<view class="tooltext_li_text">颜色</view>
</view>
<view class="tooltext_li" @click="keyboard">
<image style="width: 50upx; height: 50upx; display: block;margin: auto;"
src="../../../static/icon/diy_icon_on_default.png" mode=""></image>
<view class="tooltext_li_text">键盘</view>
</view>
</view>
<view class="tooltext_li" @click="keyboard">
<image style="width: 50upx; height: 50upx; display: block;margin: auto;" src="../../../static/icon/diy_icon_on_default.png"
mode=""></image>
<view class="tooltext_li_text">键盘</view>
<view style="width: 125upx;" @click="cancel('share')">
<view style="display: flex; padding:36upx 0;">
<view style="width: 1px; height: 28upx; background: #FFFFFF;"></view>
<image style="width: 43upx; height: 30upx; display: block;margin: auto;"
src="../../../static/icon/icon_determine.png" mode="aspectFill"></image>
</view>
</view>
</view>
<view style="width: 125upx;" @click="cancel('share')">
<view style="display: flex; padding:36upx 0;">
<view style="width: 1px; height: 28upx; background: #FFFFFF;"></view>
<image style="width: 43upx; height: 30upx; display: block;margin: auto;" src="../../../static/icon/icon_determine.png"
mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -181,8 +222,9 @@
<script>
import loadFont from '@/util/loadFont.js'
import homeservice from '@/service/homeservice.js';
var app = getApp(); // 当前APP实例
export default {
props: {
......@@ -192,20 +234,61 @@
},
data() {
return {
show:true,
show: true,
data: null,
bg_text_color: null,
inputBottom: 0,
text:'modify',
textlist:[
{text:'仓耳小丸子',url:'url("https://tprint.refinecolor.com/text/CangErXiaoWanZi.ttf")',fontname:'仓耳小丸子',lineheight:1.26,long:false,textlong:null},
{text:'千图小兔体',url:'url("https://tprint.refinecolor.com/text/Qiantu_rabbit.ttf")',fontname:'千图小兔体',lineheight:1.2,long:false,textlong:null},
{text:'站酷酷黑',url:'url("https://tprint.refinecolor.com/text/Stand_cool_black.ttf")',fontname:'站酷酷黑',lineheight:1.14,long:false,textlong:null},
{text:'站酷快乐体',url:'url("https://tprint.refinecolor.com/text/Standing_cool_happy_body.ttf")',fontname:'站酷快乐体',lineheight:1.14,long:false,textlong:null},
{text:'站酷庆科黄油体',url:'url("https://tprint.refinecolor.com/text/ZhankuQingkeButterBody.ttf")',fontname:'站酷庆科黄油体',lineheight:1.18,long:false,textlong:null},
{text:'字体视界法棍体',url:'url("https://tprint.refinecolor.com/text/Font_horizon_method_stick_body.ttf")',fontname:'字体视界法棍体',lineheight:1.14,long:false,textlong:null},
text: 'modify',
textlist: [{
text: '仓耳小丸子',
url: 'url("https://tprint.refinecolor.com/text/CangErXiaoWanZi.ttf")',
fontname: '仓耳小丸子',
lineheight: 1.26,
long: false,
textlong: null
},
{
text: '千图小兔体',
url: 'url("https://tprint.refinecolor.com/text/Qiantu_rabbit.ttf")',
fontname: '千图小兔体',
lineheight: 1.2,
long: false,
textlong: null
},
{
text: '站酷酷黑',
url: 'url("https://tprint.refinecolor.com/text/Stand_cool_black.ttf")',
fontname: '站酷酷黑',
lineheight: 1.14,
long: false,
textlong: null
},
{
text: '站酷快乐体',
url: 'url("https://tprint.refinecolor.com/text/Standing_cool_happy_body.ttf")',
fontname: '站酷快乐体',
lineheight: 1.14,
long: false,
textlong: null
},
{
text: '站酷庆科黄油体',
url: 'url("https://tprint.refinecolor.com/text/ZhankuQingkeButterBody.ttf")',
fontname: '站酷庆科黄油体',
lineheight: 1.18,
long: false,
textlong: null
},
{
text: '字体视界法棍体',
url: 'url("https://tprint.refinecolor.com/text/Font_horizon_method_stick_body.ttf")',
fontname: '字体视界法棍体',
lineheight: 1.14,
long: false,
textlong: null
},
],
typefacedata:null,
typefacedata: null,
colorList: [{
color: '#000000',
index: '01'
......@@ -669,20 +752,19 @@
};
},
onShow() {
},
onLoad() {
},
mounted() {
},
/**
* 组件的公有方法列表
*/
methods: {
//过滤字符串
filterTextInput(textStr) {
let content = textStr.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$\%\*\(\)\#\&\*]/g, '');
......@@ -692,31 +774,43 @@
that.$emit('textInput', content)
}, 0);
},
typefaceshow(e){
typefaceshow(e) {
this.$emit('typefaceshow', e)
},
keyboard(e) {
this.inputBottom = 0
},
typeface(e) {
this.text = e
this.inputBottom = 0
},
typefaceClick(e,index) {
if((index + 1) == this.typefacedata.length){
if(e.textlong == true){
typefaceClick(e, index) {
if ((index + 1) == this.typefacedata.length) {
if (e.textlong == true) {
this.$emit('typefaceClick', e)
}else{
if(e.remark != ''){
} else {
if (e.remark != '') {
this.loadFont(e)
}else{
} else {
this.$emit('typefaceClick', e)
}
}
}else{
} else {
this.$emit('typefaceClick', e)
}
// if(e.textlong == true){
// this.$emit('typefaceClick', e)
// }else{
// if(e.remark != ''){
// this.loadFont(e)
// }else{
// this.$emit('typefaceClick', e)
// }
//}
},
loadFont(textlist) {
let that = this;
......@@ -725,7 +819,7 @@
mask: true,
});
wx.loadFontFace({
global:true,
global: true,
family: textlist.key,
source: 'url(' + textlist.remark + ')',
desc: {
......@@ -739,8 +833,11 @@
},
complete(res) {
uni.hideLoading();
//wx.showToast({title: '字体下载完成',icon: 'success',duration: 2000});
textlist.long = true
that.setData({typefacedata: that.typefacedata});
that.setData({
typefacedata: that.typefacedata
});
that.$emit('typefaceClick', textlist)
}
})
......@@ -780,7 +877,9 @@
this.inputBottom = 0;
},
textInput(e) {
this.filterTextInput(e.detail.value)
this.filterTextInput(e.detail.value);
//let content = this.data.currentText.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$\%\*\(\)\#\&\*]/g, '');
//this.$emit('textInput', content)
},
cancel(e) {
this.$emit('cancel', e)
......@@ -798,12 +897,13 @@
this.data = data.data
this.bg_text_color = data.bg_text_color
this.text = data.text
if(this.text == 'typeface'){
if (this.text == 'typeface') {
this.typeface('typeface')
this.inputBottom = 'none'
}
if(this.$base.typefacedata.length > 0){
if (this.$base.typefacedata.length > 0) {
this.typefacedata = this.$base.typefacedata
//console.log(this.$base.typefacedata)
}
}
}
......@@ -820,8 +920,10 @@
align-items: center;
height: 100upx;
background: #292933;
.tooltext_li {
width: 25%;
.tooltext_li_top {
border-radius: 50%;
text-align: center;
......@@ -831,6 +933,7 @@
display: block;
padding: 2upx;
margin: 2upx auto;
.tooltext_li_top_icon {
color: #FFFFFF;
font-size: 26upx;
......@@ -838,6 +941,7 @@
text-align: center;
}
}
.tooltext_li_text {
text-align: center;
color: #FFFFFF;
......@@ -845,38 +949,40 @@
}
}
}
@font-face{
@font-face {
font-family: 'Stand_cool_blackttf';
src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
@font-face {
font-family: 'CangErXiaoWanZittf';
src: url('data:font/truetype;charset=utf-8;base64,AAEAAAAOAIAAAwBgRkZUTYxgdxUAAAyYAAAAHEdERUYAKQANAAAMeAAAAB5PUy8ypWh5tAAAAWgAAABgY21hcAIIjDUAAAHgAAABWmN2dCAAIQJ5AAADPAAAAARnYXNw//8AAwAADHAAAAAIZ2x5Znpt8q4AAANQAAACPGhlYWQZqZPqAAAA7AAAADZoaGVhB4cC4AAAASQAAAAkaG10eAxuALkAAAHIAAAAFmxvY2EBcAICAAADQAAAABBtYXhwAA8AYQAAAUgAAAAgbmFtZXh/J3gAAAWMAAAGlHBvc3T3xaShAAAMIAAAAFAAAQAAAAEAALFcJkBfDzz1AAsD6AAAAADa24hUAAAAANvgx7gAIf+pA60DUAAAAAgAAgAAAAAAAAABAAAD2P7zAAAD6AAAAAADrQABAAAAAAAAAAAAAAAAAAAABAABAAAABwAxAAcAAAAAAAIAAAAAAAAAAAAAAC4AAAAAAAQD6AGQAAUAAAKKAlgAAABLAooCWAAAAV4AMgFBAAACAgQAAAAAAAAAgAAAAxAAAAAAAAASAAAAAFRTQU4AQFFsgnIDcP+IAAAD2AENAAQAAQAAAAACFwLJAAAAIAABA+gAIQAAAAAD6AAAA+gARwBgAFEAVgAAAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAAHAAEADgAAAAKAAgAAgACUWxW7V9pgnL//wAAUWxW7V9pgnL//66XqRegnH2UAAEAAAAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACECeQAAACoAKgAqAF4AkADoAR4AAgAhAAABKgKaAAMABwAusQEALzyyBwQA7TKxBgXcPLIDAgDtMgCxAwAvPLIFBADtMrIHBgH8PLIBAgDtMjMRIREnMxEjIQEJ6MfHApr9ZiECWAAAAwBH/6kDrQNDAAMAEQAYAAATJxMXARMHJwUnNzYTFwIHJScDFhcGByYDm1TNXAEthVgo/dsHJGNoqmNrAUAsJ7HOLz+yeQFwKgGoIP3H/uwsYTVdA9MBPSr+/9gYawJ+4HVGJJgBHQAEAGD/7gOKAwgAAwASABYAGgAAASE1IQUjNSEVIxUzNxUhESMDIwEhESEXIREhAkr+tAFM/rNTAf1lMFL+8yI0mgIM/coCNrf81gMqAkM/v0BA8lR3ARX+2wIj/XxPAxoAAAAABwBR/7wDoAM/AAMADAAQABQAKAAsADAAAAETFwsBFwcnNwcnNxcnFwcnNyclFwMXBycVIxEHJxMjNTM1MxUzFSMVBScTFxMBJwEB9XaigulvSGkGUSRHM6tMSj0DNAEjUySWPW5yfUekrs5yo6MBBT/WSin+8TkBAwGyASMy/tABGRvRJBQVjBN8QYIhiBmElnz+QY4+evYBAcIwAQQ/Pz8/QBIvATQn/u/+xzgBLwAEAFb/zQONA1AAAwAHAAsAHAAAAQcFNxcjFTMhMzUjARUhESclFwchNxcHMxEhESEBNHoBL3Mmnp7+om9vAmn83RQA/zscASUnPqbP/f0BwgLMcwF0sbCw/mKwAnUd8S0aJzmf/tb+yQAAAAAAABwBVgABAAAAAAAAACQAVAABAAAAAAABAAkAjwABAAAAAAACAAcAqQABAAAAAAADAB0A7QABAAAAAAAEAAkBIQABAAAAAAAFADsBowABAAAAAAAGAAoB9QABAAAAAAAHAEsCmAABAAAAAAAIABQDFgABAAAAAAAJABQDXQABAAAAAAAKABwDrAABAAAAAAALABYD9wABAAAAAAAMABYEPAABAAAAAAANAEQE+QADAAEECQAAAFIAAAADAAEECQABABQAeQADAAEECQACAA4AmQADAAEECQADADoAsQADAAEECQAEABQBCwADAAEECQAFAHYBKwADAAEECQAGABQB3wADAAEECQAHAJYCAAADAAEECQAIADAC5AADAAEECQAJADADKwADAAEECQAKADgDcgADAAEECQALACwDyQADAAEECQAMACwEDgADAAEECQANAKQEUwCpAFMAFwBOAKwATgDTAIAAMwBlAIcAWwBXAGIAgABnAC8AZwAJAJYAUABRAGwAUwD4ADAAAgBPAN0AdQBZAGIAQABnAAkAZwBDAFIAKQAwAAIAAKlTF07CTu4zZVtXYmcvZwlQUWxTvzACT3VZYkBnCWdDUikwAgAATgDTAIAAMwBcAA8ATgA4AFsAUAAATu4zXA9OOFtQAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAAAxAC4AMAAwADAAOwBUAFMAQQBOADsAVABzAGEAbgBnAGUAcgBYAFcAWgA7AFQAUwBBAE4ARwBFAFIAADEuMDAwO1RTQU47VHNhbmdlclhXWjtUU0FOR0VSAABOANMAgAAzAFwADwBOADgAWwBQAABO7jNcD044W1AAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwADAAOwBQAFMAIAAxAC4AMAAwADEAOwBoAG8AdABjAG8AbgB2ACAAMQAuADAALgA4ADgAOwBtAGEAawBlAG8AdABmAC4AbABpAGIAMgAuADUALgA2ADQANwA4ADAAMAAAVmVyc2lvbiAxLjAwMDtQUyAxLjAwMTtob3Rjb252IDEuMC44ODttYWtlb3RmLmxpYjIuNS42NDc4MDAAAFQAcwBhAG4AZwBlAHIAWABXAFoAAFRzYW5nZXJYV1oAAFQAcwBhAG4AZwBlAHIAWABXAFoAIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIABvAGYAIABCAGUAaQBqAGkAbgBnACAAVABzAGEAbgBnAGUAcgAgAEMAaABhAHIAYQBjAHQAZQByACAAVABlAGMAaABuAG8AbABvAGcAeQAgAEMAbwAuACwAIABMAHQAZAAuAABUc2FuZ2VyWFdaIGlzIGEgdHJhZGVtYXJrIG9mIEJlaWppbmcgVHNhbmdlciBDaGFyYWN0ZXIgVGVjaG5vbG9neSBDby4sIEx0ZC4AAFMAFwBOAKwATgDTAIAAMwBlAIcAWwBXAGIAgABnAC8AZwAJAJYAUABRAGwAUwD4AABTF07CTu4zZVtXYmcvZwlQUWxTvwAAUwAXAE4ArABOANMAgAAzAGUAhwBbAFcAYgCAAGcALwBnAAkAlgBQAFEAbABTAPgAAFMXTsJO7jNlW1diZy9nCVBRbFO/AABDAGgAaQBuAGUAcwBlACAAZgBvAG4AdAAgAGYAbwByACAAYQBuAHkAIABzAHkAcwB0AGUAbQAuAABDaGluZXNlIGZvbnQgZm9yIGFueSBzeXN0ZW0uAAByAG8AZABnAGUAcgAuAGwAaQB1AEAAbwB1AHQAbABvAG8AawAuAGMAbwBtAAByb2RnZXIubGl1QG91dGxvb2suY29tAAByAG8AZABnAGUAcgAuAGwAaQB1AEAAbwB1AHQAbABvAG8AawAuAGMAbwBtAAByb2RnZXIubGl1QG91dGxvb2suY29tAABlAOAAiwC6AGAAqABOAOUATwBVAHkAzQBlALkAXwAPAE8AfwB1ACgAiwDlAFsAVwBPAFMA/wAMAGAAqABfAMUAmAB7AE4AiwBRAEgAgwC3AF8AlwBTABcATgCsAE4A0wCAADMAZQCHAFsAVwBiAIAAZwAvAGcACQCWAFAAUQBsAFMA+AB2AIQAawBjAF8ADwBOAGYAlwBiAIsAuABTAO8AMAACAABliLxgrE6MT1V56mVfD09/dSiMW1dPU9gMYKxfgXtOUUjhX1MXTsJO7jNlW1diZy9nCVBRbFO/dmtjXw9OZmL8U5UwAgAAAgAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAHAAAAAQACAQIBAwEEAQUHdW5pNTE2Qwd1bmk1NkVEB3VuaTVGNjkHdW5pODI3MgAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAYAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2tuIVAAAAADb4Me4') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
@font-face {
font-family: 'horizon_method_stick_bodyttf';
src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
@font-face {
font-family: 'Qiantu_rabbitttf';
src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
@font-face {
font-family: 'Standing_cool_happy_bodyttf';
src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
font-weight: normal;
......
pages/index/index.vue
......@@ -388,7 +388,7 @@
<!-- 替换选项 -->
<!-- 字体 -->
<uni-popup ref="textsettingsshare" type="bottom" @change="change" style="position: fixed; z-index: 9999;">
<uni-popup ref="textsettingsshare" type="bottom" @change="change" style="position: fixed; z-index: 99999;">
<view class="uni-share" style="width: 100%; height: 600upx;background: #292933;"
v-if="e_active == 3 || e_active == 4">
<textsettings @textInput='textInput' @cancel="cancel" @workcolor="workcolor"
......@@ -400,7 +400,7 @@
<!-- 文本，贴图，相框 1模板 2贴图 3字体 4编辑 22添加相框 -->
<uni-popup ref="showshare" :type="type" @change="change"
style="position: relative; z-index: 9999; width: 100%;" :style="{height: data.windowHeight +'px'}">
style="position: relative; z-index: 9998; width: 100%;" :style="{height: data.windowHeight +'px'}">
<!-- 文本 -->
<view class="uni-share full-width" :style="{height: data.windowHeight +'px'}"
v-if="e_active == 3 || e_active == 4">
......@@ -514,38 +514,55 @@
</view>
</uni-popup>
<!-- Ai转换 -->
<uni-popup ref="showAiChange" type="center" style="position: fixed; z-index: 9999; ">
<view style="height: 600upx;border-radius:20upx; background: #fff;width: 600upx;">
<image src="../../static/img/icon_close_image.png" style="width: 30upx;
padding: 30upx;
position: absolute;
right:0;
top:0;
z-index: 999;" mode="widthFix" @click="showAiChangeClose()">
</image>
<view style="height: 400upx; padding-top: 80upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;">
<image style="width:160upx;height:160upx;" src="../../static/icon_diy_anime_style.png"
@click="showAiChangeType(1)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;"> 动漫风格
</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_sketch_style.png"
@click="showAiChangeType(2)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;"> 素描风格
</view>
</view>
</view>
<view style="font-size: 30upx;color:#333; width:100%;text-align: center;margin: auto; ">
选中的图片必须带有清晰人物头像 </view>
</view>
</uni-popup>
<!-- Ai转换 -->
<uni-popup ref="showAiChange" type="center" style="position: fixed; z-index: 9999; ">
<view style="height: 950upx;border-radius:20upx; background: #fff;width: 600upx;">
<image src="../../static/img/icon_close_image.png" style="width: 30upx;
padding: 30upx;
position: absolute;
right:0;
top:0;
z-index: 999;" mode="widthFix" @click="showAiChangeClose()">
</image>
<view style="height: 360upx; padding-top: 80upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;">
<image style="width:160upx;height:160upx;" src="../../static/icon_diy_anime_style.png"
@click="showAiChangeType(1)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">动漫风格
</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_sketch_style.png"
@click="showAiChangeType(2)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">素描风格
</view>
</view>
</view>
<view style="height: 360upx; padding-top: 40upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;margin-left: 20upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_matting_style.png"
@click="showAiChangeType(3)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">人像抠图</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_enhance_style.png"
@click="showAiChangeType(4)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">色彩增强</view>
</view>
</view>
<view style="font-size: 30upx;color:#333; width:100%;text-align: center;margin: auto;">选中的图片必须带有清晰人物头像</view>
</view>
</uni-popup>
<switchGoods ref="switchGoods" @selectGoodItem="selectGoodSizeItem" @toCustomSize="toCustomSize"></switchGoods>
<!--商品弹框 -->
......@@ -3289,7 +3306,7 @@
},
async text_awaitone(content) {
// 获取当前选中的部件
if (content == '' || contente == null) {
if (content == '' || content == null) {
var item = items[index];
if (item != null) {
this.deleteItem();
......
pages/index/index_diy.vue
......@@ -26,24 +26,25 @@
<view style=" width: 48upx;margin-top: 26upx;border:none;border-top:1upx dotted transparent;height:1upx;">
</view>
<image src="../../static/icon_diy_no_print.png" style="width: 28px; height: 28px; " mode="widthFix"
@click="createWorks()"></image>
@click="createWorks()"></image>
</view>
<!-- 设计区域 -->
<view v-show="!state" class="full-width content-color full-height" :style="{background: design_color}">
<!-- 取消选中 -->
<view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel"></view>
<view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel">
</view>
<view class="container" :style="{height: data.windowHeight +'px'}" @touchmove.stop="touchMove"
@touchend.stop="touchEnd" @click.stop="itemCancel">
<view :style="{width: data.bgWidth +'px',height: data.bgHeight +'px'}" style="position: relative;">
<view v-if="guide_left"
style="border-left: 1px dashed #F29F3D;position: absolute; height: 100%; z-index: 999;"
:style="{left: ((data.bgWidth / 2) - 0.5) +'px'}"></view>
style="border-left: 1px dashed #F29F3D;position: absolute; height: 100%; z-index: 999;"
:style="{left: ((data.bgWidth / 2) - 0.5) +'px'}"></view>
<view v-if="guide_top"
style="width: 100%; border-top: 1px dashed #F29F3D;position: absolute; z-index: 999;"
:style="{top: (editory + (data.editorHeight * location_scale - 0.5)) +'px'}"></view>
style="width: 100%; border-top: 1px dashed #F29F3D;position: absolute; z-index: 999;"
:style="{top: (editory + (data.editorHeight * location_scale - 0.5)) +'px'}"></view>
<!-- 底色 -->
<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
......@@ -106,7 +107,7 @@
'margin-top': item.image_top +'px','margin-left': item.image_left +'px'}" />
<image v-else-if="item.type == 0" mode='aspectFill'
style="min-height: 15px;min-width: 15px; show-menu-by-longpress "
:src="item.content + '?x-oss-process=image/resize,lfit,w_1000'"
:src="item.content"
:data-id="item.id" :style="{width: (item.initialWidth * item.initialScale).toFixed(2) + 'px',
height:(item.initialHeight * item.initialScale).toFixed(2) + 'px',
'margin-top': item.image_top +'px','margin-left': item.image_left +'px' }" />
......@@ -131,7 +132,7 @@
:ruleWidthScale="ruleWidthScale" @getRulerLineIs="getRulerLineIs"
:zoomAndBigScan="zoomAndBigScanData">
</VueRulerTool>
<!-- 操作列表 -->
<view v-if="editory" :class="['operate-list', { 'list-active': data.listActive == true }]"
style="z-index: 10; "
......@@ -250,7 +251,7 @@
</block>
</view>
</view>
<!-- 计算字体大小 -->
<view class='item-box' style='top:-1000px;left:-1000px;'>
<view class='item-box-in'
......@@ -327,10 +328,11 @@
</view>
</view>
<!-- 图片提示 -->
<!-- 图片提示 -->
<view v-if="showone">
<view style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
@click.stop="showone = !showone"></view>
<view
style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
@click.stop="showone = !showone"></view>
<view style="position: fixed; background: #FFFFFF; top:calc((100% - 621upx) / 2); left:calc((100% - 560upx) / 2);
z-index:1000; width: 560upx; min-height: 621upx; border-radius: 12upx;">
<image style="width: 560upx; height: 298upx; display: block;margin: auto;"
......@@ -469,6 +471,16 @@
</view>
</view>
<!-- AI图像 -->
<view v-if="data.itemList.length > 0">
<view class="tool_li" @click.stop='showAiChange()'
v-if="data.itemList[data.cidx].type == 0 && data.itemList[data.cidx].isUpLoadImage">
<image class="tool_li_img" style="width: 51upx; height: 38upx;"
src="../../static/img/icon_diy_ai.png" mode=""></image>
<view class="tool_li_text">图像</view>
</view>
</view>
<view class="tool_li" style="height: 90upx;" @click.stop='deleteItem'>
<image class="tool_li_img" style="width: 51upx; height: 51upx;"
src="../../static/diy_icon_middle_default.png" mode=""></image>
......@@ -480,6 +492,9 @@
src="../../static/img/icon_select_confirm_right.png" mode=""></image>
</view>
</view>
<!-- 生成作品 -->
......@@ -516,13 +531,13 @@
<view
style="font-size: 26upx;color: #F29F3D;line-height: 20px;margin-top: 8upx; display:flex;flex-direction: row; width: 108upx">
<image src="../../static/img/icon_sticker_width_image.png" mode=""
style="width: 30upx; height: 30upx;margin-top: 9.5upx;margin-right: 12upx;" />
style="width: 30upx; height: 30upx;margin-top: 9.5upx;margin-right: 12upx;" />
{{Math.floor(data.itemList[data.cidx].width / ruleWidthScale)}}
</view>
<view
style="font-size: 26upx;color: #F29F3D ;line-height: 20px;margin-left: 15upx;margin-top: 8upx;display:flex;flex-direction: row; width: 108upx">
<image src="../../static/img/icon_sticker_height_image.png" mode=""
style="width: 30upx; height: 30upx;margin-top: 9.5upx;margin-right: 12upx;" />
style="width: 30upx; height: 30upx;margin-top: 9.5upx;margin-right: 12upx;" />
{{Math.floor(data.itemList[data.cidx].height / ruleWidthScale) }}
</view>
</view>
......@@ -544,7 +559,8 @@
<!-- 文本 -->
<view class="uni-share full-width" :style="{height: data.windowHeight +'px'}" style="z-index: 9999;"
v-if="e_active == 3 || e_active == 4">
<view style="position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 997; opacity: 0.8;"
<view
style="position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 997; opacity: 0.8;"
@click="cancel('share')"></view>
<view style="position: fixed; bottom: 0; left: 0; width: 100%; height: 20%; z-index: 999;">
<textsettings @textInput='textInput' @cancel="cancel" @workcolor="workcolor"
......@@ -586,7 +602,8 @@
</scroll-view>
</view>
</view>
<view style="position: absolute; bottom: 0upx; left: 120upx; height: 100%; width: calc(100% - 240upx); z-index: 999; overflow: hidden; background: #282932;">
<view
style="position: absolute; bottom: 0upx; left: 120upx; height: 100%; width: calc(100% - 240upx); z-index: 999; overflow: hidden; background: #282932;">
<!-- 轮播图 -->
<view style="position: relative; width: calc(100% - 40upx); z-index: 99; margin:30upx auto;">
<swiper :autoplay="true" :interval="3000" :duration="1000" :indicator-dots="true"
......@@ -947,6 +964,56 @@
border-radius: 50upx;margin-top: 40upx;" @click="copyImageStickerSave()">确认</view>
</view>
</uni-popup>
<!-- Ai转换 -->
<uni-popup ref="showAiChange" type="center" style="position: fixed; z-index: 9999; ">
<view style="height: 950upx;border-radius:20upx; background: #fff;width: 600upx;">
<image src="../../static/img/icon_close_image.png" style="width: 30upx;
padding: 30upx;
position: absolute;
right:0;
top:0;
z-index: 999;" mode="widthFix" @click="showAiChangeClose()">
</image>
<view style="height: 360upx; padding-top: 80upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;">
<image style="width:160upx;height:160upx;" src="../../static/icon_diy_anime_style.png"
@click="showAiChangeType(1)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">动漫风格
</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_sketch_style.png"
@click="showAiChangeType(2)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">素描风格
</view>
</view>
</view>
<view style="height: 360upx; padding-top: 40upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;margin-left: 20upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_matting_style.png"
@click="showAiChangeType(3)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">人像抠图</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_enhance_style.png"
@click="showAiChangeType(4)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">色彩增强</view>
</view>
</view>
<view style="font-size: 30upx;color:#333; width:100%;text-align: center;margin: auto;">
选中的图片必须带有清晰人物头像</view>
</view>
</uni-popup>
</view>
<!-- 登录弹框 -->
......@@ -975,6 +1042,11 @@
import tuya from './tuya.vue';
import VueRulerTool from './components/vue-ruler-tool.vue';
import NumSlider from '../index/components/NumSlider.vue'
import client from '../../util/script.js' // 封装全局变量
import {
Base64
} from "js-base64"
import CryptoJS from 'crypto-js';
/*** 色彩公园图片 DIY 功能页*/
var app = getApp(); // 当前APP实例
......@@ -1212,9 +1284,190 @@
methods: {
showAiChangeClose() {
this.selectChangeType = 1;
this.$refs["showAiChange"].close();
},
//显示Ai转换
showAiChange() {
this.selectChangeType = 1;
this.$refs["showAiChange"].open();
},
showAiChangeType(type) {
this.selectChangeType = type
this.changeHumanPortrait();
},
//人画像
changeHumanPortrait() {
var item = this.data.itemList[this.data.cidx];
if (item == null) {
return
}
let imageUrl = item.content + "?x-oss-process=image/resize,lfit,w_1000";
if (item.isChangeAi) {
imageUrl = item.contentOld + "?x-oss-process=image/resize,lfit,w_1000";
}
uni.showLoading({
title: 'AI图像处理中...',
mask: true
})
setTimeout(function() {
uni.hideLoading();
}, 6000);
let that = this;
this.getOssStsToken(function(result) {
wx.downloadFile({
url: imageUrl,
success: function(res) {
if (res.statusCode === 200) {
that.uploadToTempOss(result.Data, res.tempFilePath, ".jpg",
function(resultImage) {
client.callRecognizeBankCard(resultImage, wx, that
.selectChangeType,
function(result) {
uni.hideLoading();
if (result.Code) {
uni.showToast({
icon: "none",
title: "处理失败！图片中无清晰的真人头像",
duration: 2000
});
} else {
if (result.Data) {
let imageURL = result.Data.ImageURL;
imageURL = imageURL.replace("http:",
"https:")
if (!item.isChangeAi) {
item.contentOld = item.content;
}
item.content = imageURL;
item.isChangeAi = true
that.data.itemList[that.data.cidx];
}
}
that.$refs["showAiChange"].close();
}.bind(this));
}
);
}
}
})
})
},
getOssStsToken(callback) {
//这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
const endpoint = "viapiutils.cn-shanghai.aliyuncs.com";
const Action = "GetOssStsToken";
//API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
const API_VERSION = "2020-04-01";
const API_HTTP_METHOD = "POST";
const request_ = {};
//系统参数
request_["SignatureMethod"] = "HMAC-SHA1";
request_["SignatureNonce"] = client.signNRandom();
request_["AccessKeyId"] = "LTAI5tDPiEBZgfqNcWBqaFEc";
request_["SignatureVersion"] = "1.0";
request_["Timestamp"] = client.getTimestamp();
request_["Format"] = "JSON";
request_["RegionId"] = "cn-shanghai";
request_["Version"] = API_VERSION;
request_["Action"] = Action;
const url = client.generateUrl(request_, API_HTTP_METHOD, endpoint, "amI84BLFbHz6dhOVbuArrERmeemmnx");
wx.request({
url: url,
method: 'POST',
header: {
"ContentType": "application/json"
},
success: (result) => {
//获取结果
return typeof callback == "function" && callback(result.data)
},
fail: (error) => {
//获取报错信息
return typeof callback == "function" && callback(error.data)
}
})
},
//使用oss-client-sdk进行文件上传
uploadToTempOss(ossStsToken, tempFilePath, fileName, callback) {
const host = 'https://viapi-customer-temp.oss-cn-shanghai.aliyuncs.com';
let formDataParams = this.getFormDataParams(ossStsToken.AccessKeyId, ossStsToken.AccessKeySecret,
ossStsToken.SecurityToken);
const signature = formDataParams.signature;
const ossAccessKeyId = ossStsToken.AccessKeyId;
const policy = formDataParams.policy;
const key = "LTAI5tDPiEBZgfqNcWBqaFEc" + '/' + this.getNonce(6) + '/' + fileName;
const securityToken = formDataParams['x-oss-security-token'];
wx.uploadFile({
url: host, // 开发者服务器的URL。
filePath: tempFilePath,
name: 'file', // 必须填file。
formData: {
'key': key,
'OSSAccessKeyId': ossAccessKeyId,
'policy': policy,
'Signature': signature,
'x-oss-security-token': securityToken
},
success: (res) => {
if (res.statusCode === 204 || res.statusCode === '204') {
let result = 'https://viapi-customer-temp.oss-cn-shanghai.aliyuncs.com/' + key;
//console.log(result)
callback && callback(result);
} else {
//console.log('upload error', res);
}
},
fail: err => {
//console.log(err);
}
});
},
//随机字符串
getNonce(length) {
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = length; i > 0; --i) {
result += str[Math.floor(Math.random() * str.length)];
}
return result;
},
//计算上传OSS的计算签名
getFormDataParams(stsAccessKeyId, stsAccessKeySecret, securityToken) {
const date = new Date();
date.setHours(date.getHours() + 1);
const policyText = {
expiration: date.toISOString(), // 设置policy过期时间。
conditions: [
// 限制上传大小。
["content-length-range", 0, 1024 * 1024 * 1024],
],
};
const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
const signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(policy, stsAccessKeySecret));
const formData = {
OSSAccessKeyId: stsAccessKeyId,
signature,
policy,
'x-oss-security-token': securityToken
}
return formData
},
//返回上一级
backUpperPage() {
uni.navigateBack();
},
......@@ -2025,9 +2278,9 @@
this.old_lower_right_x_data = old_lower_right_x;
let item = items[items.length - 1]; //选择对象
let distanceXNew = ((this.lower_right_x_data - this.old_lower_right_x_data) * this
.ruleWidthScale); //x轴像素比例
.ruleWidthScale); //x轴像素比例
let distanceYNew = ((this.lower_right_y_data - this.old_lower_right_y_data) * this
.ruleWidthScale); //y轴像素比例
.ruleWidthScale); //y轴像素比例
drag.dragMoveUpdateXAndY(distanceXNew, distanceYNew, item, this.data, this.editor_top); //操作移动到指定位置方法
drag.getConterScale(item);
uni.showToast({
......@@ -2496,6 +2749,7 @@
isFillet: false, //是否圆角
conterScale: 0,
filletRadiusSize: filletRadiusSize, //圆角半径大小
isUpLoadImage: true
})
_this.data.itemList = items
_this.saveSnapshot();
......@@ -3677,13 +3931,13 @@
}
this.saveSnapshot();
},
/* 通过旧坐标、旋转角度、圆心计算旋转后点的新坐标 */
calNewPos(origin, center, angle) {
// 计算
let radian = Math.PI / 180 * angle;
let newX = (origin.x - center.x) * Math.cos(radian) - (origin.y - center.y) *Math.sin(radian) + center.x;
let newY = (origin.y - center.y) * Math.cos(radian) + (origin.x - center.x) *Math.sin(radian) + center.y;
let newX = (origin.x - center.x) * Math.cos(radian) - (origin.y - center.y) * Math.sin(radian) + center.x;
let newY = (origin.y - center.y) * Math.cos(radian) + (origin.x - center.x) * Math.sin(radian) + center.y;
//取10位小数
newX = newX.toFixed(4)
newY = newY.toFixed(4)
......@@ -3692,7 +3946,7 @@
y: newY
};
},
/* 通当新坐标、旋转角度、圆心计算旋转后点的旧坐标 */
calOldPos(origin, center, angle) {
// 计算
......@@ -3709,7 +3963,7 @@
y: oldY
};
},
/* 计算伸缩后的四个顶部坐标 */
calScalePos(scale, left, top, width, height) {
// 计算单边需要伸缩的比例，可为正可为负
......@@ -3743,7 +3997,7 @@
centerY: (rightTopY - leftTopY) / 2
};
},
/* 计算未伸缩时的四个顶点坐标 */
calNoScalePos(left, top, width, height) {
// 左上顶点的坐标
......@@ -3772,7 +4026,7 @@
centerY: (rightTopY - leftTopY) / 2 + leftTopY,
};
},
/* 计算四个顶点旋转后的坐标系 */
calRocatePos(scalePos, center, angle) {
// 左上顶点的坐标
......@@ -4711,7 +4965,7 @@
async text_await(content) {
//获取当前选中的部件
var item = items[index];
content = content.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$]/g, '');
content = content.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$]/g, '');
if (content != item.content) {
item.content = content;
var that = this;
......@@ -5119,16 +5373,20 @@
if (this.options.WidthIndex > (this.data.windowWidth * this.pixelScale)) {
this.pixel_scale = (this.data.windowWidth * this.pixelScale) / this.options.WidthIndex
} else {
if (this.options.WidthIndex < (this.data.windowWidth * this.pixelScale) && this.options.HeightIndex < (this.data.windowHeight * this.pixelScale)) {
if (this.options.WidthIndex < (this.data.windowWidth * this.pixelScale) && this.options
.HeightIndex < (this.data.windowHeight * this.pixelScale)) {
this.pixel_scale = 1
}
}
if (this.options.HeightIndex > (this.data.windowHeight * this.pixelScale)) {
if ((this.data.windowHeight * this.pixelScale) / this.options.HeightIndex < this.pixel_scale) {
this.pixel_scale = (this.data.windowHeight * this.pixelScale) / this.options.HeightIndex
if ((this.data.windowHeight * this.pixelScale) / this.options.HeightIndex < this
.pixel_scale) {
this.pixel_scale = (this.data.windowHeight * this.pixelScale) / this.options
.HeightIndex
}
} else {
if (this.options.WidthIndex < (this.data.windowWidth * this.pixelScale) && this.options.HeightIndex < (this.data.windowHeight * this.pixelScale)) {
if (this.options.WidthIndex < (this.data.windowWidth * this.pixelScale) && this.options
.HeightIndex < (this.data.windowHeight * this.pixelScale)) {
this.pixel_scale = 1
}
}
......@@ -5161,7 +5419,8 @@
this.data.goods_id = result.id // 商品id
this.mix_scale = result.mix_scale //上传图片比率
this.design_width = (this.options.WidthIndex * this.pixel_scale) / this.data.pixelRate // 设计宽度
this.design_height = (this.options.HeightIndex * this.pixel_scale) / this.data.pixelRate // 设计高度
this.design_height = (this.options.HeightIndex * this.pixel_scale) / this.data
.pixelRate // 设计高度
this.data.bgHeight = this.data.bgHeight // 画布高度
this.editory = (this.data.bgHeight - (this.design_height * this.data.pixelRate)) / 2 //辅助线距离
......@@ -5318,7 +5577,8 @@
that.guide_left = false
} else {
var curTime = e.timeStamp
var lastTime = e.currentTarget.dataset.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
var lastTime = e.currentTarget.dataset
.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
if (curTime - lastTime > 0) {
if (curTime - lastTime < 300 && items[index].type == 0) { //是双击事件
......@@ -5521,7 +5781,6 @@
</script>
<style lang="scss">
page {
width: 100%;
height: 100%;
......@@ -5571,11 +5830,9 @@
position: absolute;
}
.active {
}
.active {}
/*删除、缩放、旋转操作按钮 */
/*删除、缩放、旋转操作按钮 */
.rotate,
.rotate-red,
.scale,
......@@ -5967,6 +6224,7 @@
.scroll-container {
box-sizing: border-box;
white-space: nowrap;
.scroll-item {
text-align: center;
height: 80upx;
......
pages/index/machineDetail.vue
......@@ -30,9 +30,13 @@
background: linear-gradient(92deg, #E6B01A, #F29F3D);
box-shadow: 0px 19px 48px 1px rgba(20, 31, 62, 0.35);
border-radius: 40px;">
<view style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
<view
style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
立即定制</view>
</view>
<!-- <view @click="toProxyApplet()" v-if="list.is_open_manage == 1"
style="position: fixed; bottom: 35upx; text-align: center;left: 0; right: 0;font-size: 32upx; margin: auto; color: #fff;">
运营中心</view> -->
</view>
<!-- 错误提示信息 -->
......@@ -63,9 +67,18 @@
<Signin ref="Signin"></Signin>
<view v-if="statusloading == 1" @tap="toLineList"
style="position: fixed; z-index: 99; right: 0; bottom: 300upx; width: 109upx; height: 123upx;">
style="position: fixed; z-index: 99; right: 0; bottom: 440upx; width: 109upx; height: 123upx;">
<image src="../../static/liebiao.png" mode="" style="width: 243upx; height: 123upx;"></image>
</view>
<view @click="toProxyApplet()" v-if="list.is_open_manage == 1" style="position: fixed; z-index: 99; right: 0; bottom: 300upx; display: flex;align-items: center;justify-content: center;
width: 100upx; height: 88upx; background: #F29F3D; border-radius: 44upx 0px 0px 44upx;">
<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
<view>运营</view>
<view>中心</view>
</view>
</view>
<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem" @toCustomSize="toCustomSize"></switchGoods>
<!--//商品弹框 -->
......@@ -80,6 +93,7 @@
import Signin from '../index/Signin.vue';
import myhead from './head/head.vue';
import switchGoods from '../index/switchGoods.vue'; //选择商品
import Env from '@/util/Env.js';
export default {
components: {
......@@ -105,17 +119,77 @@
currentIndex: 0,
selectItem: null, //选择对象
name: "",
show_admin_login: 0
};
},
methods: {
//调转代理小程序
toProxyApplet() {
var url = Env.getBaseURL();
var envVersionName = "trial";
if (url.indexOf("colorpark") != -1) {
envVersionName = "release";
}
wx.navigateToMiniProgram({
appId: 'wx9cd3934f286f3d71',
envVersion: envVersionName,
path: 'pages/index/start-up?machine_id=' + this.machine_id + "&partner_id=" + this.list.partner_id + "&appletType=5",
success(res) {
}
})
},
//调转代理小程序
// toProxyApplet() {
// var url = Env.getBaseURL();
// var envVersionName = "trial";
// if (url.indexOf("colorpark") != -1) {
// envVersionName = "release";
// }
// wx.navigateToMiniProgram({
// appId: 'wx9cd3934f286f3d71',
// envVersion: envVersionName,
// success(res) {
// }
// })
// },
//首次进来检查是否
toFirstCheck() {
let that = this;
uni.login({
provider: 'weixin',
success: (res) => {
userService.login({
s: 'Init.checkAdminAuth',
code: res.code,
partner_id: that.list.partner_id
}).then(result => {
that.show_admin_login = result.show_admin_login
}).catch(err => {
});
},
fail: (res) => {
}
});
},
//自定义尺寸
toCustomSize() {
uni.navigateTo({
url: '../mall/size?machine_id=' + this.machine_id +
"&isFirstPage=true" +
"&machineDetail=" + JSON.stringify(this.list)
"&isFirstPage=true" +
"&machineDetail=" + JSON.stringify(this.list)
})
},
......@@ -133,23 +207,25 @@
//选择商品进来
selectGoodItem(item) {
uni.navigateTo({
url: '../index/index?machine_id=' + this.machine_id +
"&good_id=" + item.id +
"&title=" + item.title +
"&real_width=" + item.key +
"&machineDetail=" + JSON.stringify(this.list) +
"&type = 1"
url: '../index/index?machine_id=' + this.machine_id +
"&good_id=" + item.id +
"&title=" + item.title +
"&real_width=" + item.key +
"&machineDetail=" + JSON.stringify(this.list) +
"&type = 1"
})
},
//立即定制
Customize_now() {
let that = this;
if (!this.$AppContext.checkLogin()) {
this.tologo(1)
} else {
let isShowCustomizeData = this.list.customize_size == 1 ? true : false
this.$refs['switchGoods'].open(this.machine_id,isShowCustomizeData);
this.$refs['switchGoods'].open(this.machine_id, isShowCustomizeData);
}
},
......@@ -187,7 +263,9 @@
code: res.code
}).then(r => {
if (type == 1) {
that.$refs['switchGoods'].open(that.machine_id);
let isShowCustomizeData = that.list.customize_size == 1 ? true : false
that.$refs['switchGoods'].open(that.machine_id, isShowCustomizeData);
//that.$refs['switchGoods'].open(that.machine_id);
} else {
uni.navigateTo({
url: '../mall/lineUp?machine_id=' + that.machine_id +
......@@ -225,6 +303,7 @@
this.statusloading = 1;
if (res) {
this.list = res;
this.toFirstCheck();
this.myheadtext = this.machine_id + '-' + res.code //头部标题栏
}
uni.stopPullDownRefresh();
......@@ -291,7 +370,7 @@
this.$base.machine_id = this.machine_id
this.statusloading = 1;
this.Adlist() // 轮播图
this.getDetail();
//this.getDetail();
},
onShow() {
......@@ -299,7 +378,7 @@
},
onHide() {
}
};
......@@ -376,4 +455,4 @@
transition: all 0.2s ease-in 0s;
z-index: 20;
}
</style>
</style>
\ No newline at end of file
static/icon_default_no.png
static/icon_default_no.png

39.4 KB | W: | H:

static/icon_default_no.png

6.65 KB | W: | H:

static/icon_default_no.png
static/icon_default_no.png
static/icon_default_no.png
static/icon_default_no.png
  • 2-up
  • Swipe
  • Onion skin
static/icon_diy.png
static/icon_diy.png

50.5 KB | W: | H:

static/icon_diy.png

10 KB | W: | H:

static/icon_diy.png
static/icon_diy.png
static/icon_diy.png
static/icon_diy.png
  • 2-up
  • Swipe
  • Onion skin
static/icon_diy_anime_style.png
static/icon_diy_anime_style.png

37.3 KB | W: | H:

static/icon_diy_anime_style.png

9.98 KB | W: | H:

static/icon_diy_anime_style.png
static/icon_diy_anime_style.png
static/icon_diy_anime_style.png
static/icon_diy_anime_style.png
  • 2-up
  • Swipe
  • Onion skin
static/icon_diy_sketch_style.png
static/icon_diy_sketch_style.png

17.5 KB | W: | H:

static/icon_diy_sketch_style.png

4.89 KB | W: | H:

static/icon_diy_sketch_style.png
static/icon_diy_sketch_style.png
static/icon_diy_sketch_style.png
static/icon_diy_sketch_style.png
  • 2-up
  • Swipe
  • Onion skin
util/script.js
......@@ -11,62 +11,67 @@ import CryptoJS from 'crypto-js';
// miniProgramType：小程序类型，比如：微信小程序传参数：wx，支付宝传参数：my，钉钉传参数：dd，注意不要传字符串;
// callback：结果的回调
// type 1: 人物动漫化 2:人物素描化
function callRecognizeBankCard(imageURL,miniProgramType,type,callback) {
const accessKeyId = "LTAI5tDPiEBZgfqNcWBqaFEc";
//AccessKeySecret
const accessKeySecret = "amI84BLFbHz6dhOVbuArrERmeemmnx";
//这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
const endpoint = "facebody.cn-shanghai.aliyuncs.com";
//API Action，能力名称，请参考具体算法文档详情页中的Action参数，这里以银行卡识别为例：https://help.aliyun.com/document_detail/151893.html
let Action = "GenerateHumanAnimeStyle";
//API_HTTP_METHOD推荐使用POST
const API_HTTP_METHOD = "POST";
//API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
const API_VERSION = "2019-12-30";
const request_ = {};
if(type == 2 ){
Action = "GenerateHumanSketchStyle";
request_["ReturnType"] = "full";
}else{
request_["AlgoType"] = "handdrawn";
}
//系统参数
request_["SignatureMethod"] = "HMAC-SHA1";
request_["SignatureNonce"] = signNRandom();
request_["AccessKeyId"] = accessKeyId;
request_["SignatureVersion"] = "1.0";
request_["Timestamp"] = getTimestamp();
request_["Format"] = "JSON";
request_["RegionId"] = "cn-shanghai";
request_["Version"] = API_VERSION;
request_["ImageURL"] = imageURL;
request_["Action"] = Action;
callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
function callRecognizeBankCard(imageURL, miniProgramType, type, callback) {
const accessKeyId = "LTAI5tDPiEBZgfqNcWBqaFEc";
//AccessKeySecret
const accessKeySecret = "amI84BLFbHz6dhOVbuArrERmeemmnx";
//这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
let endpoint = "facebody.cn-shanghai.aliyuncs.com";
//API Action，能力名称，请参考具体算法文档详情页中的Action参数，这里以银行卡识别为例：https://help.aliyun.com/document_detail/151893.html
let Action = "GenerateHumanAnimeStyle";
//API_HTTP_METHOD推荐使用POST
const API_HTTP_METHOD = "POST";
//API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
let API_VERSION = "2019-12-30";
const request_ = {};
if (type == 2) {
Action = "GenerateHumanSketchStyle";
request_["ReturnType"] = "full";
} else if (type == 3) {
Action = "SegmentHDBody";
endpoint = "imageseg.cn-shanghai.aliyuncs.com";
} else if (type == 4) {
Action = "EnhanceImageColor";
endpoint = "imageenhan.cn-shanghai.aliyuncs.com";
API_VERSION = "2019-09-30";
request_["ImageURL"] = imageURL;
request_["Mode"] = "ln17_256";
request_["OutputFormat"] = "png";
} else {
request_["AlgoType"] = "handdrawn";
}
//系统参数
request_["SignatureMethod"] = "HMAC-SHA1";
request_["SignatureNonce"] = signNRandom();
request_["AccessKeyId"] = accessKeyId;
request_["SignatureVersion"] = "1.0";
request_["Timestamp"] = getTimestamp();
request_["Format"] = "JSON";
request_["RegionId"] = "cn-shanghai";
request_["Version"] = API_VERSION;
request_["ImageURL"] = imageURL;
request_["Action"] = Action;
callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
};
//请求数据
function callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback) {
const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);
miniProgramType.request({
url: url,
method: 'POST',
header: {
"ContentType": "application/json"
},
success: (result) => {
// 获取结果
return typeof callback == "function" && callback(result.data)
},
fail: (error) => {
// 获取报错信息
return typeof callback == "function" && callback(error.data)
}
})
const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);
miniProgramType.request({
url: url,
method: 'POST',
header: {
"ContentType": "application/json"
},
success: (result) => {
//获取结果
return typeof callback == "function" && callback(result.data)
},
fail: (error) => {
//获取报错信息
return typeof callback == "function" && callback(error.data)
}
})
};
/**
......@@ -78,106 +83,106 @@ function callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, ac
*/
//随机数字
function signNRandom() {
const Rand = Math.random()
const mineId = Math.round(Rand * 100000000000000)
return mineId;
const Rand = Math.random()
const mineId = Math.round(Rand * 100000000000000)
return mineId;
};
//Timestamp
function getTimestamp() {
let date = new Date();
let YYYY = pad2(date.getUTCFullYear());
let MM = pad2(date.getUTCMonth() + 1);
let DD = pad2(date.getUTCDate());
let HH = pad2(date.getUTCHours());
let mm = pad2(date.getUTCMinutes());
let ss = pad2(date.getUTCSeconds());
return `${YYYY}-${MM}-${DD}T${HH}:${mm}:${ss}Z`;
let date = new Date();
let YYYY = pad2(date.getUTCFullYear());
let MM = pad2(date.getUTCMonth() + 1);
let DD = pad2(date.getUTCDate());
let HH = pad2(date.getUTCHours());
let mm = pad2(date.getUTCMinutes());
let ss = pad2(date.getUTCSeconds());
return `${YYYY}-${MM}-${DD}T${HH}:${mm}:${ss}Z`;
};
function pad2(num) {
if (num < 10) {
return '0' + num;
}
return '' + num;
if (num < 10) {
return '0' + num;
}
return '' + num;
};
function ksort(params) {
let keys = Object.keys(params).sort();
let newParams = {};
keys.forEach((key) => {
newParams[key] = params[key];
});
return newParams;
let keys = Object.keys(params).sort();
let newParams = {};
keys.forEach((key) => {
newParams[key] = params[key];
});
return newParams;
};
function createHmac(stringToSign, key) {
const CrypStringToSign = CryptoJS.HmacSHA1(CryptoJS.enc.Utf8.parse(stringToSign), key);
const base64 = CryptoJS.enc.Base64.stringify(CrypStringToSign);
return base64;
const CrypStringToSign = CryptoJS.HmacSHA1(CryptoJS.enc.Utf8.parse(stringToSign), key);
const base64 = CryptoJS.enc.Base64.stringify(CrypStringToSign);
return base64;
};
function encode(str) {
var result = encodeURIComponent(str);
return result.replace(/!/g, '%21')
.replace(/'/g, '%27')
.replace(/\(/g, '%28')
.replace(/\)/g, '%29')
.replace(/\*/g, '%2A');
var result = encodeURIComponent(str);
return result.replace(/!/g, '%21')
.replace(/'/g, '%27')
.replace(/\(/g, '%28')
.replace(/\)/g, '%29')
.replace(/\*/g, '%2A');
};
function sha1(stringToSign, key) {
return createHmac(stringToSign, key);
return createHmac(stringToSign, key);
};
function getSignature(signedParams, method, secret) {
var stringToSign = `${method}&${encode('/')}&${encode(signedParams)}`;
const key = secret + "&";
return sha1(stringToSign, key);
var stringToSign = `${method}&${encode('/')}&${encode(signedParams)}`;
const key = secret + "&";
return sha1(stringToSign, key);
};
//参数拼接
function objToParam(param) {
if (Object.prototype.toString.call(param) !== '[object Object]') {
return '';
}
let queryParam = '';
for (let key in param) {
if (param.hasOwnProperty(key)) {
let value = param[key];
queryParam += toQueryPair(key, value);
}
}
return queryParam;
if (Object.prototype.toString.call(param) !== '[object Object]') {
return '';
}
let queryParam = '';
for (let key in param) {
if (param.hasOwnProperty(key)) {
let value = param[key];
queryParam += toQueryPair(key, value);
}
}
return queryParam;
};
function toQueryPair(key, value) {
if (typeof value == 'undefined') {
return `&${key}=`;
}
return `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
if (typeof value == 'undefined') {
return `&${key}=`;
}
return `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
};
function generateUrl(request, httpMethod, endpoint, accessKeySecret) {
//参数中key排序
const sortParams = ksort(request);
//拼成参数
const sortQueryStringTmp = objToParam(sortParams);
const sortedQueryString = sortQueryStringTmp.substring(1);// 去除第一个多余的&符号
//构造待签名的字符串
const Signture = getSignature(sortedQueryString, httpMethod, accessKeySecret)
//签名最后也要做特殊URL编码
request["Signature"] = encodeURIComponent(Signture);
//最终生成出合法请求的URL
const finalUrl = "https://" + endpoint + "/?Signature=" + encodeURIComponent(Signture) + sortQueryStringTmp;
return finalUrl;
//参数中key排序
const sortParams = ksort(request);
//拼成参数
const sortQueryStringTmp = objToParam(sortParams);
const sortedQueryString = sortQueryStringTmp.substring(1); // 去除第一个多余的&符号
//构造待签名的字符串
const Signture = getSignature(sortedQueryString, httpMethod, accessKeySecret)
//签名最后也要做特殊URL编码
request["Signature"] = encodeURIComponent(Signture);
//最终生成出合法请求的URL
const finalUrl = "https://" + endpoint + "/?Signature=" + encodeURIComponent(Signture) + sortQueryStringTmp;
return finalUrl;
};
//导出方法
module.exports = {
callRecognizeBankCard: callRecognizeBankCard,
signNRandom:signNRandom,
getTimestamp:getTimestamp,
generateUrl:generateUrl,
createHmac:createHmac
}
callRecognizeBankCard: callRecognizeBankCard,
signNRandom: signNRandom,
getTimestamp: getTimestamp,
generateUrl: generateUrl,
createHmac: createHmac
}
\ No newline at end of file
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