前言

最近金钱豹很火，大家开始换头像了嘛，祝大家2022财源滚滚，升职加薪哈~
我顺着这个流行的方向做了一个换头像的小程序，大家可以自行换成想要的样子，就不会和其他人有同样的头像啦，咱是程序员就要与众不同

一、首先用微信小程序获取用户头像

这个可以直接用新建小程序的时候给你的代码，不需要后端接口直接获取后存到缓存中
这里比较麻烦的是获取的头像是小图，展示的会很模糊，就需要获取高清头像，小程序有自带获取头像大小的配置

    <block wx:if="{{!hasUserInfo}}"><button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button><button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button></block></view>js,data:headImg:"",//头像canvasBg:"../../assets/images/canvasBg.png",userInfo: {},hasUserInfo: false,canIUseGetUserProfile: false,js:method:getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {this.setData({userInfo: res.userInfo,hasUserInfo: true})this.changeBgToHeadImg();}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})this.changeBgToHeadImg();},

二、再准备一些可以装扮的一些图片

我是自己截图一些好看的图片，再用PS截取改成透明色
然后再把图片上传到自己的服务器上
定义一个数组在js的data中，直接展示在页面上，这样减少调用接口的另外花费

三、找一个可以拖拽的组件，并且可以把canvas保存图片的

这个是直接在网上找的组件，可以搜canvas-drag,在页面的json文件中引入即可

<canvas canvas-id='canvas-label'
disable-scroll="true"
bindtouchstart="start"
bindtouchmove="move"
bindtouchend="end"style='width: {{width}}rpx; height: {{height}}rpx;'></canvas>

// components/canvas-drag/index.js
const DELETE_ICON = './icon/close.png'; // 删除按钮
const DRAG_ICON = './icon/scale.png'; // 缩放按钮
const STROKE_COLOR = 'red';
const ROTATE_ENABLED = true;
let isMove = false; // 标识触摸后是否有移动，用来判断是否需要增加操作历史
var isExport = false;//标识是否导出const DEBUG_MODE = false; // 打开调试后会渲染操作区域边框（无背景时有效）
const dragGraph = function ({x = 30, y = 30, w, h, type, text, fontSize = 20, color = 'red', url = null, rotate = 0, sourceId = null, selected = true}, canvas, factor) {if (type === 'text') {canvas.setFontSize(fontSize);const textWidth = canvas.measureText(text).width;const textHeight = fontSize + 10;this.centerX = x + textWidth / 2;this.centerY = y + textHeight / 2;this.w = textWidth;this.h = textHeight;} else {this.centerX = x + w / 2;this.centerY = y + h / 2;this.w = w;this.h = h;}this.x = x;this.y = y;// 4个顶点坐标this.square = [[this.x, this.y],[this.x + this.w, this.y],[this.x + this.w, this.y + this.h],[this.x, this.y + this.h]];this.fileUrl = url;this.text = text;this.fontSize = fontSize;this.color = color;this.ctx = canvas;this.rotate = rotate;this.type = type;this.selected = selected;this.factor = factor;this.sourceId = sourceId;this.MIN_WIDTH = 20;this.MIN_FONTSIZE = 10;
};dragGraph.prototype = {/*** 绘制元素*/paint() {this.ctx.save();// 由于measureText获取文字宽度依赖于样式，所以如果是文字元素需要先设置样式let textWidth = 0;let textHeight = 0;if (this.type === 'text') {this.ctx.setFontSize(this.fontSize);this.ctx.setTextBaseline('middle');this.ctx.setTextAlign('center');this.ctx.setFillStyle(this.color);textWidth = this.ctx.measureText(this.text).width;textHeight = this.fontSize + 10;// 字体区域中心点不变，左上角位移this.x = this.centerX - textWidth / 2;this.y = this.centerY - textHeight / 2;}// 旋转元素this.ctx.translate(this.centerX, this.centerY);this.ctx.rotate(this.rotate * Math.PI / 180);this.ctx.translate(-this.centerX, -this.centerY);// 渲染元素if (this.type === 'text') {this.ctx.fillText(this.text, this.centerX, this.centerY);} else if (this.type === 'image') {if (isExport) {console.log(this.y);if (this.y<=0) {this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h-20);} else if (this.y >= 160 && this.y < 210) {this.ctx.drawImage(this.fileUrl, this.x, this.y-36, this.w, this.h-30);} else if ((this.y >= 210)) {this.ctx.drawImage(this.fileUrl, this.x, this.y - 36, this.w, this.h - 30);} else if (this.y >= 160 && this.y > 210) {this.ctx.drawImage(this.fileUrl, this.x, this.y-5, this.w, this.h - 30);} else if ((this.y >=60)) {this.ctx.drawImage(this.fileUrl, this.x, this.y-12, this.w, this.h-30);} else {console.log(this.x);this.ctx.drawImage(this.fileUrl, this.x, this.y-8, this.w, this.h-30);}//this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);}else {this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h);}}// 如果是选中状态，绘制选择虚线框，和缩放图标、删除图标if (this.selected) {this.ctx.setLineDash([2, 5]);this.ctx.setLineWidth(2);this.ctx.setStrokeStyle(STROKE_COLOR);this.ctx.lineDashOffset = 6;if (this.type === 'text') {this.ctx.strokeRect(this.x, this.y, textWidth, textHeight);this.ctx.drawImage(DELETE_ICON, this.x - 15, this.y - 15, 30, 30);this.ctx.drawImage(DRAG_ICON, this.x + textWidth - 15, this.y + textHeight - 15, 30, 30);} else {this.ctx.strokeRect(this.x, this.y, this.w, this.h);this.ctx.drawImage(DELETE_ICON, this.x - 15, this.y - 15, 30, 30);this.ctx.drawImage(DRAG_ICON, this.x + this.w - 15, this.y + this.h - 15, 30, 30);}}this.ctx.restore();},/*** 给矩形描边* @private*/_drawBorder() {let p = this.square;let ctx = this.ctx;this.ctx.save();this.ctx.beginPath();ctx.setStrokeStyle('orange');this._draw_line(this.ctx, p[0], p[1]);this._draw_line(this.ctx, p[1], p[2]);this._draw_line(this.ctx, p[2], p[3]);this._draw_line(this.ctx, p[3], p[0]);ctx.restore();},/*** 画一条线* @param ctx* @param a* @param b* @private*/_draw_line(ctx, a, b) {ctx.moveTo(a[0], a[1]);ctx.lineTo(b[0], b[1]);ctx.stroke();},/*** 判断点击的坐标落在哪个区域* @param {*} x 点击的坐标* @param {*} y 点击的坐标*/isInGraph(x, y) {// 删除区域左上角的坐标和区域的高度宽度const delW = 30;const delH = 30;// 旋转后的删除区域坐标const transformedDelCenter = this._rotatePoint(this.x, this.y, this.centerX, this.centerY, this.rotate);const transformDelX = transformedDelCenter[0] - delW / 2;const transformDelY = transformedDelCenter[1] - delH / 2;// 变换区域左上角的坐标和区域的高度宽度const scaleW = 30;const scaleH = 30;const transformedScaleCenter = this._rotatePoint(this.x + this.w, this.y + this.h, this.centerX, this.centerY, this.rotate);// 旋转后的变换区域坐标const transformScaleX = transformedScaleCenter[0] - scaleW / 2;const transformScaleY = transformedScaleCenter[1] - scaleH / 2;// 调试使用，标识可操作区域if (DEBUG_MODE) {// 标识删除按钮区域this.ctx.setLineWidth(1);this.ctx.setStrokeStyle('red');this.ctx.strokeRect(transformDelX, transformDelY, delW, delH);// 标识旋转/缩放按钮区域this.ctx.setLineWidth(1);this.ctx.setStrokeStyle('black');this.ctx.strokeRect(transformScaleX, transformScaleY, scaleW, scaleH);// 标识移动区域this._drawBorder();}if (x - transformScaleX >= 0 && y - transformScaleY >= 0 &&transformScaleX + scaleW - x >= 0 && transformScaleY + scaleH - y >= 0) {// 缩放区域return 'transform';} else if (x - transformDelX >= 0 && y - transformDelY >= 0 &&transformDelX + delW - x >= 0 && transformDelY + delH - y >= 0) {// 删除区域return 'del';} else if (this.insidePolygon(this.square, [x, y])) {return 'move';}// 不在选择区域里面return false;},/***  判断一个点是否在多边形内部*  @param points 多边形坐标集合*  @param testPoint 测试点坐标*  返回true为真，false为假*  */insidePolygon(points, testPoint) {let x = testPoint[0], y = testPoint[1];let inside = false;for (let i = 0, j = points.length - 1; i < points.length; j = i++) {let xi = points[i][0], yi = points[i][1];let xj = points[j][0], yj = points[j][1];let intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);if (intersect) inside = !inside;}return inside;},/*** 计算旋转后矩形四个顶点的坐标（相对于画布）* @private*/_rotateSquare() {this.square = [this._rotatePoint(this.x, this.y, this.centerX, this.centerY, this.rotate),this._rotatePoint(this.x + this.w, this.y, this.centerX, this.centerY, this.rotate),this._rotatePoint(this.x + this.w, this.y + this.h, this.centerX, this.centerY, this.rotate),this._rotatePoint(this.x, this.y + this.h, this.centerX, this.centerY, this.rotate),];},/*** 计算旋转后的新坐标（相对于画布）* @param x* @param y* @param centerX* @param centerY* @param degrees* @returns {*[]}* @private*/_rotatePoint(x, y, centerX, centerY, degrees) {let newX = (x - centerX) * Math.cos(degrees * Math.PI / 180) - (y - centerY) * Math.sin(degrees * Math.PI / 180) + centerX;let newY = (x - centerX) * Math.sin(degrees * Math.PI / 180) + (y - centerY) * Math.cos(degrees * Math.PI / 180) + centerY;return [newX, newY];},/**** @param {*} px 手指按下去的坐标* @param {*} py 手指按下去的坐标* @param {*} x 手指移动到的坐标* @param {*} y 手指移动到的坐标* @param {*} currentGraph 当前图层的信息*/transform(px, py, x, y, currentGraph) {// 获取选择区域的宽度高度if (this.type === 'text') {this.ctx.setFontSize(this.fontSize);const textWidth = this.ctx.measureText(this.text).width;const textHeight = this.fontSize + 10;this.w = textWidth;this.h = textHeight;// 字体区域中心点不变，左上角位移this.x = this.centerX - textWidth / 2;this.y = this.centerY - textHeight / 2;} else {this.centerX = this.x + this.w / 2;this.centerY = this.y + this.h / 2;}const diffXBefore = px - this.centerX;const diffYBefore = py - this.centerY;const diffXAfter = x - this.centerX;const diffYAfter = y - this.centerY;const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180;// 旋转的角度if (ROTATE_ENABLED) {this.rotate = currentGraph.rotate + angleAfter - angleBefore;}const lineA = Math.sqrt(Math.pow((this.centerX - px), 2) + Math.pow((this.centerY - py), 2));const lineB = Math.sqrt(Math.pow((this.centerX - x), 2) + Math.pow((this.centerY - y), 2));if (this.type === 'image') {let resize_rito = lineB / lineA;let new_w = currentGraph.w * resize_rito;let new_h = currentGraph.h * resize_rito;if (currentGraph.w < currentGraph.h && new_w < this.MIN_WIDTH) {new_w = this.MIN_WIDTH;new_h = this.MIN_WIDTH * currentGraph.h / currentGraph.w;} else if (currentGraph.h < currentGraph.w && new_h < this.MIN_WIDTH) {new_h = this.MIN_WIDTH;new_w = this.MIN_WIDTH * currentGraph.w / currentGraph.h;}this.w = new_w;this.h = new_h;this.x = currentGraph.x - (new_w - currentGraph.w) / 2;this.y = currentGraph.y - (new_h - currentGraph.h) / 2;} else if (this.type === 'text') {const fontSize = currentGraph.fontSize * ((lineB - lineA) / lineA + 1);this.fontSize = fontSize <= this.MIN_FONTSIZE ? this.MIN_FONTSIZE : fontSize;// 旋转位移后重新计算坐标this.ctx.setFontSize(this.fontSize);const textWidth = this.ctx.measureText(this.text).width;const textHeight = this.fontSize + 10;this.w = textWidth;this.h = textHeight;// 字体区域中心点不变，左上角位移this.x = this.centerX - textWidth / 2;this.y = this.centerY - textHeight / 2;}},toPx(rpx) {return rpx * this.factor;},
};
Component({/*** 组件的属性列表*/properties: {graph: {type: Object,value: {},observer: 'onGraphChange',},bgColor: {type: String,value: '',},bgImage: {type: String,value: '',},bgSourceId: {type: String,value: '',},width: {type: Number,value: 660,},height: {type: Number,value: 660,},enableUndo: {type: Boolean,value: false,}},/*** 组件的初始数据*/data: {history:[],isExport:false},attached() {const sysInfo = wx.getSystemInfoSync();const screenWidth = sysInfo.screenWidth;this.factor = screenWidth / 660;if (typeof this.drawArr === 'undefined') {this.drawArr = [];}this.ctx = wx.createCanvasContext('canvas-label', this);this.draw();},/*** 组件的方法列表*/methods: {toPx(rpx) {return rpx * this.factor;},initBg(){this.data.bgColor = '';this.data.bgSourceId = '';this.data.bgImage = '';},initHistory(){this.data.history = [];},recordHistory(){if (!this.data.enableUndo){return;}this.exportJson().then((imgArr) => {this.data.history.push(JSON.stringify(imgArr));}).catch((e) => {console.error(e);});},undo() {if (!this.data.enableUndo) {console.log(`后退功能未启用，请设置enableUndo="{{true}}"`);return;}if(this.data.history.length > 1){this.data.history.pop()let newConfigObj = this.data.history[this.data.history.length - 1];this.initByArr(JSON.parse(newConfigObj));}else{console.log('已是第一步，不能回退');}},onGraphChange(n, o) {console.log("onGraphChange");if (JSON.stringify(n) === '{}') return;this.drawArr.push(new dragGraph(Object.assign({x: 30,y: 30,}, n), this.ctx, this.factor));this.draw();// 参数有变化时记录历史this.recordHistory();},initByArr(newArr) {console.log("initByArr");this.drawArr = []; // 重置绘画元素this.initBg(); // 重置绘画背景// 循环插入 drawArrnewArr.forEach((item, index) => {switch (item.type) {case 'bgColor':this.data.bgImage = '';this.data.bgSourceId = '';this.data.bgColor = item.color;break;case 'bgImage':this.data.bgColor = '';this.data.bgImage = item.url;if (item.sourceId) {this.data.bgSourceId = item.sourceId;}break;case 'image':case 'text':if (index === newArr.length - 1) {item.selected = true;} else {item.selected = false;}this.drawArr.push(new dragGraph(item, this.ctx, this.factor));break;}});this.draw();},draw() {if (!isExport && this.data.bgImage !== '') {this.ctx.drawImage(this.data.bgImage, 0, 0, 360, 360);this.drawArr.forEach((item) => {item.paint();});}if (this.data.bgColor !== '') {this.ctx.save();this.ctx.setFillStyle(this.data.bgColor);this.ctx.fillRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));this.ctx.restore();}if (isExport) {this.ctx.drawImage(this.data.bgImage, 0, 0, 360, 300);this.drawArr.forEach((item) => {item.paint();});isExport = false;}return new Promise((resolve) => {this.ctx.draw(false, () => {resolve();});});},start(e) {console.log("start");isMove = false; // 重置移动标识const {x, y} = e.touches[0];this.tempGraphArr = [];let lastDelIndex = null; // 记录最后一个需要删除的索引this.drawArr && this.drawArr.forEach((item, index) => {const action = item.isInGraph(x, y);if (action) {item.action = action;this.tempGraphArr.push(item);// 保存点击时的坐标this.currentTouch = {x, y};if (action === 'del') {lastDelIndex = index;// 标记需要删除的元素}} else {item.action = false;item.selected = false;}});// 保存点击时元素的信息console.log(this.tempGraphArr)if (this.tempGraphArr.length > 0) {for (let i = 0; i < this.tempGraphArr.length; i++) {let lastIndex = this.tempGraphArr.length - 1;// 对最后一个元素做操作if (i === lastIndex) {// 未选中的元素，不执行删除和缩放操作if (lastDelIndex !== null && this.tempGraphArr[i].selected) {if (this.drawArr[lastDelIndex].action === 'del') {this.drawArr.splice(lastDelIndex, 1);this.ctx.clearRect(0, 0, this.toPx(this.data.width - 400), this.toPx(this.data.height - 400));}} else {this.tempGraphArr[lastIndex].selected = true;this.currentGraph = Object.assign({}, this.tempGraphArr[lastIndex]);}} else {// 不是最后一个元素，不需要选中，也不记录状态this.tempGraphArr[i].action = false;this.tempGraphArr[i].selected = false;}}}this.draw();},move(e) {const {x, y} = e.touches[0];if (this.tempGraphArr && this.tempGraphArr.length > 0) {isMove = true; // 有选中元素，并且有移动时，设置移动标识const currentGraph = this.tempGraphArr[this.tempGraphArr.length - 1];if (currentGraph.action === 'move') {currentGraph.centerX = this.currentGraph.centerX + (x - this.currentTouch.x);currentGraph.centerY = this.currentGraph.centerY + (y - this.currentTouch.y);// 使用中心点坐标计算位移，不使用 x,y 坐标，因为会受旋转影响。if (currentGraph.type !== 'text') {currentGraph.x = currentGraph.centerX - this.currentGraph.w / 2;currentGraph.y = currentGraph.centerY - this.currentGraph.h / 2;}} else if (currentGraph.action === 'transform') {currentGraph.transform(this.currentTouch.x, this.currentTouch.y, x, y, this.currentGraph);}// 更新4个坐标点（相对于画布的坐标系）currentGraph._rotateSquare();this.draw();}},end(e) {console.log("start");this.tempGraphArr = [];if(isMove){isMove = false; // 重置移动标识// 用户操作结束时记录历史this.recordHistory();}},export(flag) {console.log(flag);return new Promise((resolve, reject) => {this.drawArr = this.drawArr.map((item) => {item.selected = false;return item;});this.draw().then(() => {wx.canvasToTempFilePath({canvasId: 'canvas-label',width: 660,height: 660,destWidth: 1320,destHeight: 1320,success: (res) => {resolve(res.tempFilePath);},fail: (e) => {reject(e);},}, this);});})},exportJson() {return new Promise((resolve, reject) => {let exportArr = this.drawArr.map((item) => {item.selected = false;switch (item.type) {case 'image':return {type: 'image',url: item.fileUrl,y: item.y,x: item.x,w: item.w,h: item.h,rotate: item.rotate,sourceId: item.sourceId,};break;case 'text':return {type: 'text',text: item.text,color: item.color,fontSize: item.fontSize,y: item.y,x: item.x,w: item.w,h: item.h,rotate: item.rotate,};break;}});if (this.data.bgImage) {let tmp_img_config = {type: 'bgImage',url: this.data.bgImage,};if (this.data.bgSourceId) {tmp_img_config['sourceId'] = this.data.bgSourceId;}exportArr.unshift(tmp_img_config);} else if (this.data.bgColor) {exportArr.unshift({type: 'bgColor',color: this.data.bgColor});}resolve(exportArr);})},changColor(color) {const selected = this.drawArr.filter((item) => item.selected);if (selected.length > 0) {selected[0].color = color;}this.draw();// 改变文字颜色时记录历史this.recordHistory();},changeBgColor(color) {this.data.bgImage = '';this.data.bgColor = color;this.draw();// 改变背景颜色时记录历史this.recordHistory();},changeBgImage(newBgImg) {this.data.bgColor = '';if (typeof newBgImg == 'string') {this.data.bgSourceId = '';this.data.bgImage = newBgImg;} else {this.data.bgSourceId = newBgImg.sourceId;this.data.bgImage = newBgImg.url;}this.draw();// 改变背景图片时记录历史this.recordHistory();},clearCanvas() {this.ctx.clearRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));this.ctx.draw();this.drawArr = [];this.initBg(); // 重置绘画背景this.initHistory(); // 清空历史记录}}
});

四、保存图片存到本地

预览图片和保存到本地都是调用图片一个是放大，一个是直接保存到本地
我这里用的同一个方法，预览图片和保存图片调用canvas的同一个导出方法，但是在保存图片的时候在回调中加了一个保存图片的函数，其实也可以写成一个方法，通过不同的flag进行判断，我这里有点懒了

/*** 预览图片*/onExport() {CanvasDrag.export("1").then((filePath) => {console.log(filePath);wx.previewImage({urls: [filePath]})}).catch((e) => {console.error(e);})},/*** 保存图片*/saveImg() {let that = this;CanvasDrag.export("1").then((filePath) => {console.log(filePath);wx.saveImageToPhotosAlbum({filePath: filePath,success(res) { wx.showToast({title: '保存成功',icon: 'none'})that.onChangeBgImage(null, that.data.canvasBg);//that.onChangeBgImage(null, that.data.canvasBg);}})}).catch((e) => {console.error(e);})},

其实还可以优化一下，加入上传图片的功能，这样就不是必须使用头像进行修改，并且可以给朋友家人增加头像更换，因为我不想那么麻烦就只做了获取头像进行上传的功能
整体功能就是这样，小程序还没上线，后面优化之后再发布，给大家试试~
如果你也喜欢就写一个试试吧，祝大家新年快乐，虎年大吉~

最后小编还会赠送一份前端大礼包送给大家【加君羊：581286372】帮助大家正好的学习！

我给你们做了一个金钱豹头像助手，虎年祝大家今年暴富相关推荐

用python做一个剪切板助手
用Python做剪切板助手目录用Python做剪切板助手程序效果图: 一.构造多线程类二.构造剪切助手类剪切板检测变化函数剪切板操作函数程序运行函数操作模式函数三.实例类并让程序工作 ...
仿微信做的一个群组聊天头像的功能
之前做过一个访微信头像的功能,现在贴出代码先在工程里放入对应的头像,然后装入一个数组传入方法里,接着画好xib对应的9宫格头像,里面用到了2个库,大家可以去网上下载 - (void)viewDi ...
抖音很火的金钱豹头像来了！各种美化版本
近日,<西游记>中的金钱豹意外走红,当代年轻人因为想金钱暴富,便纷纷用其做头像. <西游记>金钱豹演员估计做梦都没想到,多年以后,自己居然以这种方式爆红博主为大家收集了许 ...
制作一个用户头像选择器仿 WeGame
制作一个用户头像选择器仿 WeGame CropAvatar 作者:WPFDevelopersOrg - 驚鏵原文链接:https://github.com/WPFDevelopersOrg/WPF ...
如何用Qt抠一个圆形头像出来
如题,如何使用Qt抠一个圆形头像出来? 先来看效果: 首先加载一张图片,显示一个透明圆形,圆形外半透明,滚动鼠标滚轮,圆形区域变大变小. 鼠标按下可以拖动图片移动,来选定要截取的图片位置,按下&quo ...
Python自制动漫头像~快帮女神制作一个专属头像~
嗨嗨,大家下午好 ~ 不知道你们喜不喜欢用动漫头像~ 但是每次换完头像后总会跟其他人撞头像! 实在没办法,在其他地方存的,别人也能找到,所以干脆一点用Python自制! 做自己的专属头像~ 领取源码或 ...
我摊牌了，熬夜用Python给女神冰冰做了一个相册！发现...
微博,作为当下主流的社交平台之一,日活跃用户高达2亿多人.人们可以在微博上发表自己的感悟,自己的照片以及日常的生活内容.微博为广大的用户提供了更加多元化的社交平台. 相比于微信,许多小姐姐们更喜欢在微 ...
学完css，做了一个csdn导航栏（一步一步做csdn导航栏，内容满满）
学完css,做了一个csdn导航栏,内容满满步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示知识点完整代码番外:本来打算做 ...
090613 今天做了一个软件没搞定的RAID5
今天做了一个RAID5 ,之前一个人用<**恢复大师>.<r-studio>以及<RAID Reconstructor>反正能用的软件都用过了,最后的结果是恢复出来 ...

我给你们做了一个金钱豹头像助手，虎年祝大家今年暴富

一、首先用微信小程序获取用户头像

二、再准备一些可以装扮的一些图片

三、找一个可以拖拽的组件，并且可以把canvas保存图片的

四、保存图片存到本地

我给你们做了一个金钱豹头像助手，虎年祝大家今年暴富相关推荐

最新文章

热门文章