画布海报头像放进二维码里面

const app = getApp();Page({/*** 页面的初始数据*/data: {userInfo: {},isOverShare: true},/*** 生命周期函数--监听页面加载*/onLoad: async function(options) {await this.getUserInfo()this.csh()},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},// 获取用户信息async getUserInfo() {let userInfo = await app.api.getUserInfo()this.setData({userInfo: userInfo});},// 生成分享海报// 初始化csh() {wx.showLoading({title: "海报绘制中..."});var that = this;// 获取设备宽高，以备海报全屏显示wx.getSystemInfo({success: function(res) {that.setData({windowW: res.windowWidth,windowH: res.windowHeight});}});// 海报背景图线上地址var url = "https://xianganzhu.oss-cn-chengdu.aliyuncs.com/images/poster/fx-bg.png";var i1 = false;// 商品图片（哪吒头像）线上地址// var urll = that.data.urlHeader;var i2 = true;// 小程序二维码var urlqCord = that.data.userInfo.share_qrcode;// 自己头像var urlavati = that.data.userInfo.avatarurlvar i3 = false;var aa = Promise.all([that.getBG(url), that.getBG(urlqCord), that.getBG(urlavati)]).then( res => {console.log(123 ,res)this.setData({bgpic: res[0],qCord: res[1],avait: res[2]})that.drawCanvas();})},isdrawCanvas(i1 = true, i2 = true, i3 = true) {var that = this;if (i1 == true && i2 == true && i3 == true) {that.drawCanvas();}},// 点击生成并保持海报到手机相册// 生成二维码// clickMe() {//   var that = this;//   that.setData({//     show: true//   });//   // setTimeout(() => {}, 3000);//   // that.drawCanvas();//   that.csh();// },// 绘制canvasdrawCanvas() {var that = this;var windowW = that.data.windowW;var windowH = that.data.windowH;var text = this.data.userInfo.nickname.length <= 5 ? '' : '...'var textName = (this.data.userInfo.nickname).slice(0, 5) + text// var text = '从不拘泥任何世俗凡人的目光，我要奔向前方那光芒，生而为魔，那又如何'// 使用 wx.createContext 获取绘图上下文 contextvar context = wx.createCanvasContext("firstCanvas");// 海报背景图// context.drawImage(that.data.bgpic, (windowW - 280) / 2, (windowH - 450) / 2, 280, 450)context.drawImage(that.data.bgpic,(windowW - 310) / 2,(windowH - 631) / 2,310,551);console.log('背景图', that.data.bgpic)// 商品图片// context.drawImage(//   that.data.propic,//   (windowW - 240) / 2,//   (windowH - 440) / 2,//   230,//   230// );// 商品文字描述// context.setFontSize(16);// context.setFillStyle("#2BA148");// context.fillText(//   "扫码立即加入湘安猪",//   (windowW - 200) / 2,//   (windowH + 55) / 2// );context.setFontSize(20)context.setFillStyle("#2BA148")context.fillText('我是' + textName, (windowW - 100) / 2, (windowH - 20) / 2)// 设置线条的起始路径坐标// context.moveTo((windowW + 45) / 2, (windowH + 44) / 2);// 设置线条的终点路径坐标// context.lineTo((windowW + 200) / 2, (windowH + 44) / 2);context.stroke(); //对当前路径进行描边// 商品名字，名字很长调用方法将文字折行，传参 文字内容text，画布context// var row = that.newLine(text, context)var a = 24; //定义行高25// for (var i = 0; i < row.length; i++) {//   context.setFontSize(16)//   context.setFillStyle("#000000")//   context.fillText(row[i], (windowW - 195) / 2, (windowH + 130) / 2 + a * i, 320)// }// 识别小程序二维码context.save();context.beginPath();context.arc(100 / 2 + (windowW - 85) / 2, 100 / 2 + (windowH + 70) / 2, 100 / 2, 0, Math.PI * 2, false);context.clip();context.drawImage(that.data.qCord,(windowW - 85) / 2,(windowH + 70) / 2,100,100);console.log('二维码', that.data.qCord)context.restore();// context.save();context.beginPath();context.arc(45 / 2 + (windowW - 30) / 2, 45 / 2 + (windowH + 125) / 2, 45 / 2, 0, Math.PI * 2, false);context.clip();context.drawImage(that.data.avait,(windowW - 30) / 2,(windowH + 125) / 2,45,45);console.log('头象', that.data.avait)context.restore();// context.save();//绘制头像// context.beginPath(); //开始绘制//先画个圆，前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针// context.arc(45 / 2 + (windowW - 30) / 2, 45 / 2 + (windowH + 115) / 2, 45 / 2, 0, Math.PI * 2, false);// context.clip(); //画好了圆 剪切  原始画布中剪切任意形状和尺寸。// 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因// context.drawImage(that.data.avait, (windowW - 30) / 2, (windowH + 115) / 2, 45, 45);// context.restore();context.draw();wx.hideLoading();},// 点击保存按钮，同时将画布转化为图片daochu: function() {wx.showLoading({title: "制造中..."});var that = this;wx.canvasToTempFilePath({x: 0,y: 0,canvasId: "firstCanvas",fileType: "jpg",quality: 1,success: function(res) {that.setData({shareImage: res.tempFilePath});wx.hideLoading();setTimeout(function() {wx.showModal({title: "提示",content: "将生成的海报保存到手机相册，可以发送给微信好友或分享到朋友圈",success(res) {if (res.confirm) {that.eventSave();} else if (res.cancel) {console.log("用户点击取消");}}});}, 1000);},fail() {wx.hideLoading();wx.showToast({title: "制造失败",icon: "none",duration: 2000});}});},// 将商品分享图片保存到本地eventSave() {// console.log('保存图片', this.data.shareImage);wx.showLoading({title: "保存中..."});wx.saveImageToPhotosAlbum({filePath: this.data.shareImage,success(res) {wx.hideLoading();wx.showToast({title: "保存图片成功",icon: "success",duration: 2000});},fail() {wx.hideLoading();wx.showToast({title: "保存图片失败",icon: "none",duration: 2000});}});},//将线上图片地址下载到本地，此函数进行了封装，只有在需要转换url的时候调用即可getBG(url) {// Promise函数给我很大的帮助，让我能return出回调函数中的值return new Promise(function(resolve) {wx.downloadFile({url: url,success: function(res) {url = res.tempFilePath;resolve(url);}});});},// canvas多文字换行newLine(txt, context) {var txtArr = txt.split("");var temp = "";var row = [];for (var i = 0; i < txtArr.length; i++) {if (context.measureText(temp).width < 210) {temp += txtArr[i];} else {i--;row.push(temp);temp = "";}}row.push(temp);//如果数组长度大于3 则截取前三个if (row.length > 3) {var rowCut = row.slice(0, 3);var rowPart = rowCut[2];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (context.measureText(test).width < 180) {test += rowPart[a];} else {break;}}empty.push(test);var group = empty[0] + "..."; //这里只显示三行，超出的用...表示rowCut.splice(2, 1, group);row = rowCut;}return row;},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {return {// title: '做任务赢积分',path: "/pages/xiangan_home/home/home?uid=" + this.data.userInfo.uuid};}
});

画布海报头像放进二维码里面相关推荐

【小程序开发原创】小程序裁剪图片上传头像，二维码源码
微信小程序图片裁剪工具,简单易用项目需求在做微信小程序的时候有个图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,做了一个简单的图片 ...
微信服务号分享图片（包括微信头像以及二维码）
最近一个产品需要是把微信服务号中一个网页内容生成一张图片,用户长按可以保存为图片,图片中的二维码可以识别,图片中包含用户头像.效果如图1-1 最常用的做法是把网页转换为cancas,接着转成图片,最流 ...
Java 绘制带圆角头像的二维码
导入相关的jar包 <dependency><groupId>com.google.zxing</groupId&g ...
Java 代码基于开源组件生成带头像的二维码
二维码在我们目前的生活工作中,随处可见,日常开发中难免会遇到需要生成二维码的场景,网上也有很多开源的平台可以使用,不过这里我们可以通过几个开源组件,自己来实现一下. 在动手之前我们先思考一下需要进行的 ...
Java 代码基于开源组件生成带头像的二维码，推荐收藏
二维码在我们目前的生活工作中,随处可见,日常开发中难免会遇到需要生成二维码的场景,网上也有很多开源的平台可以使用,不过这里我们可以通过几个开源组件,自己来实现一下. 在动手之前我们先思考一下需要进行的 ...
痞子衡嵌入式：走进二维码(QR Code)的世界（1）- 引言
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是走进二维码(QR Code)的世界专题的引言. 如今二维码可以说是深入走进大家的生活了,推送名片.扫码支付都离不开它,大家几乎每天都会和 ...
java 生成带网络头像的二维码
最近做一个带微信头像的二维码的功能,微信头像是一个链接,所以先把微信头像下载,临时保存,生成二维码 /*** 文件下载工具类** @author zhengxinghua*/ public class ...
小程序生成海报，含用户头像用户名二维码和背景图
如果是本地资源文件,直接将data中需要绘制的图片路径赋值即可.我的需求是接口返回数据,绘制生成图片保存手机. 首先在微信公众平台填写安全域名,每个月只有5次配置域名机会,还有两次(瑟瑟发扌斗) 设置 ...
小程序生成分享海报，带二维码可携带参数！
最近开发小程序遇到一个需求,后端提供一个二维码,携带分享参数,前端来生成一个分享海报,下面是部分截图这里我就只说一下点击生成海报的方法,这里调用了第三方插件,直接下载,下载直通车代码下载好了,直接 ...

画布海报头像放进二维码里面

画布海报头像放进二维码里面相关推荐

最新文章

热门文章