小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）
2024-06-04 20:55:13
小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）
微信小程序生成特色头像，海报等是比较常见的。下面我来介绍下实现该类小程序的过程。
- 首先选择前端来通过 canvas 绘制。这样比较节省成本，效率也高。
- 小程序使用uniapp 来进行开发，方便后期打包为微信，百度等小程序。
- 可以扫码体验下 我的小程序 制作个性化的头像，
- 下面介绍使用 wxml2canvas 生成头像的小程序的制作过程
创建项目
- 使用HBuilderX 创建一个 uni-app 的项目，可以参照uniapp 官网。
- 下载项目使用的依赖 npm init 创建package.json
- yarn add less wxml2canvas
生成头像的重要步骤
- 首先思路是上传一张自己想做为头像的图片
- 然后选择自己想给该图片添加的元素，利用css 定位，使图片位置重叠，产生新的效果
- 讲最新的效果生成图片，并下载。
上传图片
上传图片可以提供两种思路，一种是直接使用微信头像。一种是用户自己上传图片
- 使用微信头像的方案
wxLogin() {let _this = this;wx.getUserProfile({desc: '获取你的头像',success: res => {console.log(res)_this.headUrl = res.userInfo.avatarUrl},fail: () => {//拒绝授权wx.showToast({title: '您拒绝了请求,不能获取你的头像',icon: 'error',duration: 2000});return;}});
},
- 用户自己上传图片，可以直接从相册中选择，也可以使用相机。
pictureClick (selectid) {const _this = this;let typelist = selectid === 1 ? ['camera'] : ['album']uni.chooseImage({count: 1,sourceType: typelist, //这要注意，camera掉拍照，album是打开手机相册crop: {width: 320,height: 320},success: (res)=> {_this.$refs.gmyImgCropper.chooseImage(res)}});
},
- 自己上传的图片，需要使用canvas 来进行裁剪为头像比列相同的图片
<imgCropper ref="gmyImgCropper" :quality="1" cropperType="fixed" :imgSrc="headUrl" @getImg="getImg"></imgCropper>
// 上面 是裁剪图片的组件， 篇幅较大，可以参考项目源码
利用css 定位生成效果图
<view class="head-box" :style="{marginTop: headboxStyle, height: showImgW}"><canvas canvas-id="myCanvas" class="myCanvas" :style="{width: showImgW, height: showImgW}"></canvas><view class="showimg showimg-box head-img-border" :style="{width: showImgW, height: showImgW}"><pickerselect @modelselect="modelselect"><view class="showimg normalimgbox" :style="{width: showImgW, height: showImgW, background: currentInfo.iconColor}"><image class="headimg normalimg" src="https://bj.bcebos.com/txy-dev/txy/main/normal.png"/></view><view id="my-canvas" class="my_canvas"><view class="showimg" :style="{width: showImgW, height: showImgW}"><image mode="aspectFill " data-type="image" :data-url="headUrl" class="headimg my_draw_canvas" :src="headUrl"/></view><view class="showimg" :style="{width: showImgW, height: showImgW}"><image mode="heightFix" data-type="image" :data-url="selectimg" class="headimg my_draw_canvas" :src="selectimg"/></view></view></pickerselect></view>
</view>
利用wxml2canvas 生成最终的头像图片
import Wxml2Canvas from 'wxml2canvas'
export const startDraw = ()=> {let that = this// 创建wxml2canvas对象let drawMyImage = new Wxml2Canvas({element: 'myCanvas', // canvas的id,obj: that, // 传入当前组件的thiswidth: 200* 2,height: 200 * 2,background: '#141415', // 生成图片的背景色progress(percent) { // 进度console.log(percent);},finish(url) { // 生成的图片wx.hideLoading()savePoster(url)},error(res) { // 失败原因console.log(res);wx.hideLoading()}}, this);let data = {// 获取wxml数据list: [{type: 'wxml',class: '.my_canvas .my_draw_canvas', // my_canvas要绘制的wxml元素根类名， my_draw_canvas单个元素的类名（所有要绘制的单个元素都要添加该类名）limit: '.my_canvas', // 要绘制的wxml元素根类名x: 0,y: 0}]}// 绘制canvasdrawMyImage.draw(data, this);
}
export const drawMyCanvas = () => {wx.showLoading()const that = thiswx.createSelectorQuery().select('#my-canvas') // 在 WXML 中填入的 id.fields({ scrollOffset: true, size: true }, () => {startDraw()}).exec(() => {console.log(888)})
}
将生成的图片下载到本地
export const savePoster = (url) => {const that = thiswx.saveImageToPhotosAlbum({filePath: url,success: function() {wx.showToast({title: '保存成功',icon: 'none',duration: 1500});},fail(err) {if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {wx.showModal({title: '提示',content: '需要您授权保存相册',showCancel: false,success: modalSuccess => {wx.openSetting({success(settingdata) {if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.saveImageToPhotosAlbum({filePath: url,success: function () {wx.showToast({title: '保存成功',icon: 'success',duration: 2000})},})} else {wx.showToast({title: '授权失败，请稍后重新获取',icon: 'none',duration: 1500});}}})}})}}})
}
下面是我的小程序体验码，项目代码。希望能和大家共同学习进步
[项目代码] https://gitee.com/eyes-star/txy-mp.git
小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）相关推荐
- html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
- 微信小程序合成海报_利用微信小程序中Canvas API来合成海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下其他的一种实现方式吧 原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToT ...
- 微信小程序利用canvas绘制一个动画百分比圆圈
效果图(动态的圆圈) <template> <view class='circleBar'><view class="wrap"><vie ...
- 微信小程序利用canvas绘制一个静态百分比圆圈
效果如图 <view class='circleBar'><view class="wrap"><canvas class="cir&quo ...
- 微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档 发现两种途径 需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
- 微信小程序利用canvas实现六边形蜘蛛图
微信小程序利用canvas实现六边形蜘蛛图 发布时间:2018-01-24 14:30:29 1..wxml <canvas style="width: 200px; height: ...
- 小程序 uni canvas绘制圆角图片 圆角矩形
小程序 uni canvas绘制圆角图片 圆角矩形 获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
- 小程序利用canvas实现波浪动态图，原生canvas的部分限制
小程序利用canvas实现波浪动态图 小程序的canvas与该动态图的问题 首先上效果图片 下面直接上代码 小程序的canvas与该动态图的问题 小程序的canvas与html的canvas实现是完全 ...
- 解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <!-- 每道题 --><view style="backg ...
最新文章
- Authid current_user的用法
- 2013.09.14 不能继续，就应该趁早放弃
- log4net 在asp.net WEB应用程序中的配置
- ReviewForJob(3)表、栈和队列
- 1社会心理学---感知情境
- oracle表访问方式
- JSON 在线编辑器
- Dxdesigner SCH to Mentor PCB
- matlab dlt标定,实验三 Matlab图像处理基本操作及摄像机标定(DLT)
- 3.17新政： 北京楼市重磅炸弹
- PS 将签名背景修改为透明色
- Uncle-黄，恍恍惚惚的面经 -- 1（初级Java）
- pyqt5 selenium 等待元素出现 visibility_of_element_located
- 操作系统--03内存管理
- 洛谷 P1413 坚果保龄球
- Pytorch Note46 生成对抗网络的数学原理
- 东南大学提出条件自监督小样本学习方法，显著提升小样本分类准确率
- 郑州大学计算机系1996级校友,公共管理学院成功举办96级公共关系专业学生毕业20周年返校活动...
- WinSock网络编程基础（2）客户端
- Ubuntu20.04ssh服务器和客户端配置