微信小程序生成头像

功能

实现套用png透明图模板生成头像，可以指定模板，简单替换开箱即用。
可以自己选择图片，也可以通过微信头像生成。
能通过微信代码图片审查，调用微信小程序珊瑚安全API，实现对用户选择的头像进行安全审查。

效果

源码

https://gitee.com/nickdlk/wechat_icon_generation

使用

自行创建一个微信小程序，下载微信开发者工具，下载源代码。

可以自定义的地方：
根目录下 app.json 可以修改标题

"navigationBarTitleText": "头像生成",

\pages\index\index.wxml 可以修改首页版权信息

背景图:
<image src="/images/background.jpg" class="background_a" mode="scaleToFill"></image>
logo:
<image src='/images/logo.png' mode='aspectFit' style="width: 200px; height: 200px;"></image>
 <view>美术设计： XXX </view>
 <view>技术支持： Nick </view>

图片可以直接替换源文件
本地样式 存放在images/logos/下 动态加载 但是因为小程序限制2048kb 存放数量有限 需要对样式进行压缩
可以将样式放在图床上，使用图床的链接

index\index.js

更换样式要修改draw函数下的画图代码

否则画出来的头像会有空白,没有填充满整个框

context.arc(85, 85, 150, 0, 2 * Math.PI); ○的xy 还有半径
context.drawImage(data, 25, 25, 120, 120); 填充头像进去 x,y 长宽

修改getLocalImg函数下的service

 /** 调用珊瑚安全检查上传的图片是否违规
             * https://developers.weixin.qq.com/community/servicemarket/detail/000a246b6fca70b76a896e6a25ec15
             * 登录后购买，填入接入文档里服务接口的service到下面的service中
             * */
            wx.serviceMarket.invokeService({
              service: '',//填自己的service
              api: 'imgSecCheck',
              data: {
                "Action": "ImageModeration",
                "Scenes": ["PORN", "POLITICS", "TERRORISM"],
                "ImageBase64": res.data,
                "Config": "",
                "Extra": ""
              },
            }).then(res => {
              //成功 获取返回信息
              console.log(res)
              // console.log(res.data.Response.Suggestion)
              if(res.data.Response.Suggestion=="PASS" ){
                wx.hideToast()
                console.log("跳转裁剪")
                wx.navigateTo({
                  url: `../upload/upload?src=${src}` //跳转裁剪
                })
              }else{
                console.error("图片违规")
                wx.hideToast()
                wx.showToast({
                  title: '图片违规,请重选!',
                  icon: 'none',
                  duration: 2500
                })
              }
            }).catch(err => {
              //错误
              wx.hideToast()
              console.error('invokeService fail !!!! ', err)
              if(res.errMsg != "invokeService:ok"){
                console.log("错误 额度不足或者其他原因")
                wx.showToast({
                  title: res.errMsg,
                  icon: 'none',
                  duration: 1500
                })
              }
            })
           }
       })