Powerful avatar making artifact wechat applet

This is a relatively rich avatar making applet seen at present

Have rich templates , A variety of basic classifications

Support direct access to wechat avatars , Or upload pictures directly

In addition, if uploaded, it can also support multiple functions such as image modification and editing

And take out CPS, Take a taxi CPS, Restaurant CPS, Movie tickets, etc CPS function

In addition, it supports more applet recommendations , Better drainage for other small programs

design sketch

<view class="cu-modal {
    {modalName?'show':''}}" wx:if="{
    {modalName}}">
    <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
            <view class="content-login"> reminder </view>
            <view bindtap="hideModal" class="action">
                <text class="cuIcon-close text-red"></text>
            </view>
        </view>
        <view class="padding-xl">
            <button bindtap="handleLogin" class="btn-an cu-btn-login round bg-red button-hover "> Please authorize login first </button>
        </view>
    </view>
</view>
<view class="content">
    <view class="loading" wx:if="{
    {loadingDH}}">
        <view class="thorui-loading__2">
            <view class="thorui-ani__1"></view>
            <view class="thorui-ani__2"></view>
            <view></view>
        </view>
    </view>
    <view class="btns">
        <view class="header" wx:if="{
    {!loadingDH}}">
            <view class="canvas" style="background-image: url({
    {uploadImgUrl}});background-size:100% 100%;" wx:if="{
    {SucaiImg}}">
                <image src="{
    {SucaiImg}}"></image>
            </view>
            <image class="canvas" src="{
    {uploadImgUrl}}" wx:else></image>
            <canvas canvasId="myAvatar" class="canvas" style="top:-1000px"></canvas>
        </view>
    </view>
</view>
<view>
    <view class="grid col-2 padding-sm">
        <view class=" text-center">
            <button bindtap="handleLogin" class=" cu-btn round bg-z-gray shadow-blur button-hover" style="height: 30px;">
                <image class="login-img margin-right-xs" src="../../static/image/wx_icon.png"></image>
                <text class="text-white text-sm"> Authorized wechat Avatar </text>
            </button>
        </view>
        <view class=" text-center">
            <button bindtap="upimg" class=" cu-btn round bg-z-gray shadow-blur button-hover " style="height: 30px;">
                <image class="login-img margin-right-xs" src="../../static/image//tp_icon.png"></image>
                <text class="text-white text-sm"> Select upload image </text>
            </button>
        </view>
    </view>
    <scroll-view bindscrolltolower="scrollToLower" class="scrollView" lowerThreshold="30" scrollY="true" style="height:{
    {scrollHeight}}px;background: #ffffff;" upperThreshold="0">
        <view class="grid col-4 grid-square padding-lr-xs">
            <view wx:if="{
    {imgData.length>0}}" wx:for="{
    {imgData}}" wx:key="index">
                <image bind:tap="chooseImg" class="imgList {
    {selSucaiIndex==index?'selClass':'selNo'}}" data-id="{
    {item.id}}" data-index="{
    {index}}" data-item="{
    {item.is_lock?'lock':''}}" data-url="{
    {item.image_url}}" lazyLoad="true" mode="aspectFill" src="{
    {item.image_url}}"></image>
                <image bindtap="suo" class="suo" src="../../image/suo.png" wx:if="{
    {item.is_lock}}"></image>
            </view>
        </view>
    </scroll-view>
</view>
<view class="grid col-2 btn-view">
    <view class=" text-center">
        <button class="btn-an cu-btn-an round bg-z-gray shadow-blur button-hover " openType="share" style="width: 90%;">
            <text class="text-white text-df cuIcon-forward margin-right-xs"></text>
            <text class="text-white text-df"> Friends share </text>
        </button>
    </view>
    <view class=" text-center">
        <button bindtap="handleSaveImg" class="btn-an cu-btn-an round bg-z-gray shadow-blur button-hover " style="width: 90%;">
            <text class="text-white text-df cuIcon-check margin-right-xs"></text>
            <text class="text-white text-df"> Make sure to generate </text>
        </button>
    </view>
</view>

Source code acquisition method
Q Group 1：1084039861
Q Group 2：598199629

Thank you for reading , Feel good about it ~