国庆头像生成器小程序源码

介绍

这里给大家分享一款无需服务器无需后端无需域名的国庆头像小程序，单前端。

项目已成功部署上线，亲测有效，简单粗暴。

扫码查看成品：

源码部分

UI源码

<template>
  <view class="content">
    <image src="../../static/background.jpg" class="all-back"></image>
    <view class="qwe">
      汪氏出品-必是精品
    </view>
    <view class="top-content">
      <view class="top-title">
        <view class="title-unit" :class="{ 'title-select': item.selected }" v-for="(item, index) in imageList"
          :key="item.key" @click="itemClick(item)">
          {{ item.title }}
        </view>
      </view>
      <scroll-view scroll-x :show-scrollbar="false" class="scroll-view">
        <view class="image-div">
          <image :class="{ 'image-margin': index !== 0 }" @click="imageClick(item, index)"
            v-for="(item, index) in getImageList()" :src="item.src" :key="index"></image>
        </view>
      </scroll-view>
    </view>

    <view class="image-card">
      <view class="photo-main-view">
        <!--  -->
        <view class="avatar-div " id="avatar-container">
          <image class="img" id="avatar-img" :src="avatarImage"></image>

          <view class="empty-view " v-if="!avatarImage">
            <image class="empty" src="../../static/images/avatar_empty.svg"></image>
          </view>

          <image class="avatar-default " :src="currentFrame" v-if="currentFrame"></image>
        </view>

        <view class="ctlbtn">
          <view class="icon-div btn-margin">
            <view class="icon-zuo iconfont" v-if="showSwitch(-1)" @click="switchAvatar(-1)"></view>
            <view class="icon-you iconfont" v-if="showSwitch(1)" @click="switchAvatar(1)"></view>
          </view>
          <view v-if="userInfo" class="action-btn btn-margin" @click="getUserProfile()">获取头像</view>
          <button class="action-btn btn-margin" v-else open-type="getUserInfo" @click="getUserProfile()">获取头像</button>
          <button class="action-btn btn-primary" @click="shareFc()">保存头像</button>
          <button class="action-btn btn-primary2" open-type="share">分享给好友</button>
        </view>
      </view>
    </view>




    <view class="hideCanvasView">
      <canvas class="hideCanvas" id="default_PosterCanvasId" canvas-id="default_PosterCanvasId"
        :style="{ width: (poster.width || 10) + 'px', height: (poster.height || 10) + 'px' }"></canvas>
    </view>
  </view>
</template>

样式源码

.content {
    background-size: 100% 100%;
    padding-top: 200rpx;

    .all-back {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      min-height: 100vh;
      width: 100%;
    }

    .top-content {
      width: 610rpx;
      background-color: #ffffff;
      margin: 30rpx;
      border-radius: 50rpx;
      padding: 0 40rpx 30rpx;
      position: relative;

      .top-title {
        display: flex;
        align-items: center;

        .title-unit {
          padding: 40rpx 20rpx;
          font-size: 30rpx;
        }

        .title-select {
          font-size: 30rpx;
          font-weight: bold;
          color: #ff4500;
        }
      }


    

扫描上方二维码后回复：国庆头像，即可获得源码。