微信小程序生成海报带二维码功能

wxml文件

<view><text class='shareText'>生成海报分享至</text><view class='imgBox'><button open-type="share" class='zfbtn'><image src="{{wechat}}" class='img'></image></button><button class='zfbtn m_l' bindtap='formSubmit'><image src="{{quan}}" class='img'></image></button></view><!--生成海报  --><view class='imagePathBox' hidden="{{maskHidden == false}}"><image src="{{imagePath}}" class='shengcheng'></image><button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button></view><view hidden="{{maskHidden == false}}" class="mask"></view> <view class="canvas-box"><canvas  style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"/></view>
</view>

wxss文件

/* 海报 */
.shareText{display: block;text-align: center;color: #333;font-size: 34rpx;margin-top: 50rpx;font-weight: 700;
}
.imgBox{text-align: center;width: 100%;margin-top:35rpx;padding-bottom: 20rpx;
}
.img{display: inline-block;width: 70rpx;height: 70rpx;
}
.m_l{margin-left: 180rpx;
}
.zfbtn{display: inline-block ;width: 320rpx !important;height: 150rpx;border-radius: 50%;background: transparent;outline: none;border: 0;padding: 0;
}
button[class="zfbtn"]::after {border: 0;
}
button[class="zfbtn m_l"]::after {border: 0;
}
.imagePathBox{width: 100%;height: 100%;background: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;
}
.shengcheng{width: 80%;height: 80%;position: fixed;top: 50rpx;left: 50%;margin-left: -40%;z-index: 10;
}
.baocun{display: block;width: 80% !important;height: 80rpx;padding: 0;line-height: 80rpx;text-align: center;position: fixed;bottom: 50rpx;left: 10%;background: #DD434B;color: #fff;font-size: 32rpx;border-radius: 44rpx;
}
button[class="baocun"]::after{border: 0;
}

js文件

const app = getApp()
import QRCode from '../../utils/qrcode.js';
Page({/*** 页面的初始数据*/data: {// 海报背景img:"../../assets/images/img/gobg.png",// 微信图标wechat:"../../assets/images/img/wechat.png",// 朋友圈图标quan:"../../assets/images/img/quan.png",// 控制海报的显示与隐藏maskHidden: false,// 分享人的昵称name:"",// 分享人的头像touxiang:"",// 页面二维码path6: "",// 作品图片path7: ""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that= this// 判断是通过点击还是扫二维码进入页面// 通过扫二维码海报进入页面 if (options.scene) {var a = decodeURIComponent(options.scene) //把二维码携带的参数转成字符串，看小程序文档// 拿到作品idconsole.log(a)let id = a.split('&')[0]let MemberId = a.split('&')[1]console.log(id) console.log(MemberId)options.id = id.split('=')[1]options.MemberId = MemberId.split('=')[1]console.log(options)}// 海报结束// 拿到作品idconsole.log(options)that.setData({ProId: options.id,MemberId:options.MemberId})wx.getStorage({key:'userInfo',success:function(res){console.log(res.data)that.setData({SessionId: res.data.SessionId,Uid: res.data.Uid,// 海报用户昵称name: res.data.FirstName})// 海报wx.downloadFile({url: res.data.Face, //仅为示例，并非真实的资源success: function (res) {// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {console.log(res)that.setData({touxiang: res.tempFilePath})}}})}})},// 海报开始//将canvas转换为图片保存到本地，然后将图片路径传给image图片的srccreateNewImg: function () {var that = this;var context = wx.createCanvasContext('mycanvas');context.setFillStyle("#fff")context.fillRect(0, 0, 375, 667)var path = "../../assets/images/img/gobg.png";//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片//不知道是什么原因，手机环境能正常显示context.drawImage(path, 0, 0, 375, 183);var path1 = that.data.touxiang;console.log(path1,"path1")//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片var path2 = "../../assets/images/img/txquan.png";// var path3 = "../../assets/images/img/heise.png";var path4 = "../../assets/images/img/wenziBg.png";var path5 = "../../assets/images/img/wenxin.png";var path6 = that.data.path6;var path7 = "../../assets/images/img/small.jpg"context.drawImage(path2, 126, 56, 120, 120);//不知道是什么原因，手机环境能正常显示// context.save(); // 保存当前context的状态var name = that.data.name;//绘制名字context.setFontSize(24);context.setFillStyle('#333333');context.setTextAlign('center');context.fillText(name, 185, 200);context.stroke();//绘制作品图片context.drawImage(path7, 37, 236, 300, 220);//绘制左下角文字背景图context.drawImage(path4, 25, 520, 184, 82);context.setFontSize(12);context.setFillStyle('#333');context.setTextAlign('left');context.fillText("快来和我们一起看画栈网中", 35, 540);context.stroke();context.setFontSize(12);context.setFillStyle('#333');context.setTextAlign('left');context.fillText("各位画友的精华之作吧！", 35, 560);context.stroke();context.setFontSize(12);context.setFillStyle('#333');context.setTextAlign('left');context.fillText("你值得拥有~", 35, 580);context.stroke();//绘制右下角扫码提示语context.drawImage(path5, 248, 578, 90, 25);//绘制右下角二维码context.drawImage(path6, 248, 482, 90, 90);//绘制头像context.arc(186, 116, 50, 0, 2 * Math.PI) //画出圆context.strokeStyle = "#DD434B";context.clip(); //裁剪上面的圆形context.drawImage(path1, 136, 66, 100, 100); // 在刚刚裁剪的园上画图context.draw();//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时setTimeout(function () {wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function (res) {var tempFilePath = res.tempFilePath;that.setData({imagePath: tempFilePath,canvasHidden:true});},fail: function (res) {console.log(res);}});}, 200);},//点击保存到相册baocun:function(){var that = thiswx.saveImageToPhotosAlbum({filePath: that.data.imagePath,success(res) {wx.showModal({content: '图片已保存到相册，赶紧晒一下吧~',showCancel: false,confirmText: '好的',confirmColor: '#333',success: function (res) {if (res.confirm) {console.log('用户点击确定');/* 该隐藏的隐藏 */that.setData({maskHidden: false})}},fail:function(res){console.log(11111)}})}})},//点击生成formSubmit:async function () {var that = this;wx.request({url: 'https://api.weixin.qq.com/cgi-bin/token',header: { 'content-type': 'application/json' },data: {grant_type: 'client_credential',appid:'小程序appid',//小程序开发者进入后台可以看到secret: '秘钥'//小程序开发者进入后台可以看到},success:function(res) {console.log(res)wx.request({// 调用接口Curl: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,method: 'POST',responseType: 'arraybuffer',data: {"page": 'pages/megagame-workDetails/megagame-workDetails', // 要生成二维码的页面路径"width": 200, // 二维码的大小'scene':  'id='+ that.data.ProId + '&'  + 'MemberId=' + that.data.MemberId  // 页面需要携带的参数},success(res) {console.log(res)let base64 = wx.arrayBufferToBase64(res.data)console.log(base64)that.setData({path6: 'data:image/PNG;base64,' + base64})console.log(that.data.path6)},fail(err){console.log(err)}})}})that.setData({maskHidden: false, });wx.showToast({title: '生成中...',icon: 'loading',duration: 1000});setTimeout(function () {wx.hideToast()that.createNewImg();that.setData({maskHidden: true});}, 1000)},// 海报结束/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function (res) {}
})

需要用到的path

微信小程序生成海报带二维码功能相关推荐

微信小程序生成自定义参数二维码
微信小程序生成自定义参数二维码前言实现尾巴前言最近项目中要用到二维码分享功能,需要封装一些自定义的参数通过二维码分享.查看官方文档,发现系统提供了生成二维码的功能,但是细看才发现官方提供的接 ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
微信小程序生成详情页面二维码
在获取二维码之前我们首先要获取到access_token. 1.获取access_token 官方接口:https://api.weixin.qq.com/cgi-bin/token?appid= ' ...
微信小程序生成页面分享二维码（代码亲测有效）
/*** 获取不限制的小程序码(没有数量限制)** @param accessToken* @param page* @return*/public void getUnlimitedQRCode(S ...
微信小程序生成跳转二维码
官方三种方式,当前我们用第二种微信二维码官方文档: wxacode.get | 微信开放文档 (qq.com) 工具接口代码: import com.alibaba.fastjson.JSON; i ...
微信小程序条码、二维码生成模块
代码地址如下: http://www.demodashi.com/demo/13994.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
基于JavaSSM和微信小程序的智能二维码门禁管理系统
目录 1 引言 2 2 系统需求分析 2 2.1开发环境 2 2.2关键技术 2 2.2.1 Spring 框架 2 2.2.2 Spring MVC 框架 3 2.2.3 Mybatis 3 2.2 ...
微信小程序获取扫描二维码后携带的参数
微信小程序获取扫描二维码后携带的参数 1.decodeURIComponent解析生成二维码的链接. /*** 生命周期函数--监听页面加载*/onLoad: function(options) {i ...

微信小程序生成海报带二维码功能

微信小程序生成海报带二维码功能相关推荐

最新文章

热门文章