头像生成器微信小程序代码-Toy模板网

这篇具有很好参考价值的文章主要介绍了头像生成器微信小程序代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序代码生成器,小程序,微信小程序,小程序,前端

微信小程序需要wxml，wxss，js三种类型代码

1，wxml

<view class="container">
  <view class="title">兔年头像生成器</view>
  <view class="description">选择一张图片，生成你的兔年头像吧！</view>
  <image class="avatar" src="{{avatarUrl}}"></image>
  <button class="btn" bindtap="onButtonClick">生成头像</button>
  <view class="result" wx:if="{{result}}">{{result}}</view>
</view>

2，wxss

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  
  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .description {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
  }
  
  .avatar {
    width: 200px;
    height: 200px;
    margin-bottom: 30px;
  }
  
  .btn {
    width: 200px;
    height: 40px;
    background-color: #007aff;
    color: #fff;
    border-radius: 20px;
  }
  
  .result {
    margin-top: 30px;
    font-size: 18px;
    color: #f00;
  }

3，js文章来源地址https://www.toymoban.com/news/detail-521669.html

Page({
    data: {
      avatarUrl: '/images/default-avatar.jpg',
      result: ''
    },
    onButtonClick: function() {
      wx.chooseImage({
        count: 1,
        success: res => {
          const tempFilePath = res.tempFilePaths[0];
          wx.getImageInfo({
            src: tempFilePath,
            success: res => {
              wx.showLoading({
                title: '头像生成中',
              });
              const ctx = wx.createCanvasContext('canvas');
              ctx.drawImage(res.path, 0, 0, 400, 400);
              const rabbitImage = '/images/rabbit.png';
              ctx.drawImage(rabbitImage, 250, 0, 150, 150);
              const rabbitEarsImage = '/images/rabbit-ears.png';
              ctx.drawImage(rabbitEarsImage, 230, -20, 200, 200);
              const rabbitNoseImage = '/images/rabbit-nose.png';
              ctx.drawImage(rabbitNoseImage, 280, 120, 100, 100);
              ctx.draw(false, () => {
                wx.canvasToTempFilePath({
                  canvasId: 'canvas',
                  success: res => {
                    this.setData({
                      avatarUrl: res.tempFilePath,
                      result: '头像已生成！'
                    });
                    wx.hideLoading(); // 隐藏加载动画
                  },
                  fail: err => {
                    console.error(err);
                    wx.hideLoading(); // 隐藏加载动画
                  }
                });
              });
            },
            fail: err => {
              console.error(err);
            }
          });
        },
        fail: err => {
          console.error(err);
        }
      });
    }
  })

到了这里，关于头像生成器微信小程序代码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！