微信小程序分享生成海报（自带二维码）+头像+昵称

前言：
我的分享海报是弹框，可根据自己要求写成页面，原理都是一样的，背景图是前期测试的，效果是OK的，真机测试手机也是显示的。

效果图：

wxml:

 <!-- 生成海报 --><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:670px;position:fixed;top:9999px" canvas-id="mycanvas" /></view>
</view>

js:

// pages/my/my.js
import api from '../../utils/http'
const app = getApp()
Page({/*** 页面的初始数据*/data: {userInfo: '', domainURL: "", //图片线上地址info: "",imgList: '',evalatImage: '',bgBanner: '',     //背景imagePath: "",  //图片maskHidden: false, //开关qrcode_image: '', //二维码headimgurl: '', //头像nickName: ''   //名称},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({userInfo: wx.getStorageSync("userInfo"),headimgurl: wx.getStorageSync("userInfo").headimgurl,nickName: wx.getStorageSync("userInfo").nickName,domainURL: app.globalData.domainURL})var that = this;api.post("/app/web/poster/list").then(res => {if (res.code == 200) {//domainURL:图片拼接的线上地址， 可根据自身情况修改 that.setData({bgBanner: that.data.domainURL + res.data[0].imageUri,evalatImage: that.data.domainURL + res.data[0].imageUri,})//console.log(that.data.bgBanner)}}).catch(err => {//console.log(err)})that.qrcode_image();this.getInfo();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.setData({maskHidden: false});},//点击生成海报formSubmit: function (e) {var that = this;wx.showToast({title: '海报生成中...',icon: 'loading',duration: 1000});that.createNewImg();setTimeout(function () {// wx.hideToast()that.setData({maskHidden: true});}, 1000);},//将canvas转换为图片保存到本地，然后将图片路径传给image图片的srccreateNewImg: function () {var that = this;console.log(that.data.bgBanner)var context = wx.createCanvasContext('mycanvas');context.clearRect(0, 0, 375, 660); // （X轴坐标，Y轴坐标，宽，高）wx.getImageInfo({src: that.data.bgBanner,success(res) {//console.log(res)context.drawImage(res.path, 0, 0, 375, 660);// （X轴坐标，Y轴坐标，宽，高）context.setFillStyle("#fff")// context.fillRect(0, 0, 375, 660)// （X轴坐标，Y轴坐标，宽，高）context.save();var path = that.data.evalatImage;context.drawImage(path, 0, 0, 375, 660);// （X轴坐标，Y轴坐标，宽，高）var path2 = that.data.qrcode_image;// 里面继续添加图片的话必须要用wx.getImageInfowx.getImageInfo({src: that.data.headimgurl,success(nav) {that.setData({headimgurl: nav.path})console.log(that.data.headimgurl, 1, nav.path)var avatarurl_width = 60; //绘制的头像宽度var avatarurl_heigth = 60; //绘制的头像高度var avatarurl_x = 160; //绘制的头像在画布上的位置var avatarurl_y = 115; //绘制的头像在画布上的位置context.save();context.beginPath();context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);context.clip();context.drawImage(nav.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);context.restore();context.draw(context);},fail(err) {//console.log(err)}});var titl = that.data.nickName;context.setFontSize(18);context.setFillStyle('#333');context.setTextAlign('left');context.font = 'normal bold 18px sans-serif';context.fillText(titl, 160, 200);context.stroke();context.save();//console.log("海报底部二维码" + path2);//绘制头像context.save(); //保存之前的画布设置context.beginPath();context.arc(90, 540, 50, 0, 2 * Math.PI);context.setStrokeStyle("#ffe200");context.clip(); //裁剪上面的圆形context.drawImage(path2, 40, 490, 100, 100);// （X轴坐标，Y轴坐标，宽，高）context.restore();context.closePath();console.log(path2)context.save(); //保存之前的画布设置// context.draw(true); //true表示保留之前绘制内容context.draw(context);},fail(err) {//console.log(err)}});//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时setTimeout(function () {wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function (res) {var tempFilePath = res.tempFilePath;that.setData({imagePath: tempFilePath});},fail: function (res) {//console.log(res);}});}, 1000);},//点击保存到相册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)}})}})},qrcode_image: function () {let that = this;wx.request({url: 'https://api.weixin.qq.com/cgi-bin/token',data: {grant_type: 'client_credential',appid: 'XXXXXX', //不能缺少，否则二维码出不来secret: 'XXXXXX' //不能缺少，否则二维码出不来},success: function (res) {wx.request({url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,data: {"path": "/pages/login/login", //默认跳转到主页:pages/index/index，可指定"width": 200,"scene": "evaId=" + that.data.id, //携带的参数},responseType: 'arraybuffer', // 这行很重要,转为二进制数组header: {'content-type': 'application/json;charset=utf-8'},method: 'POST',success(res) {//console.log(res)//转为base64let bin64 = wx.arrayBufferToBase64(res.data);that.setData({//base 64设置到页面上qrcode_image: "data:image/png;base64," + bin64});let fileManager = wx.getFileSystemManager(); //获取文件管理器let filePath = wx.env.USER_DATA_PATH + '/code.jpg'; //设置临时路径fileManager.writeFile({ //获取到的数据写入临时路径filePath: filePath, //临时路径// encoding: 'binary', //编码方式，二进制data: res.data, //请求到的数据success: function (res) {// //console.log(res)wx.getImageInfo({src: filePath,success(res) {//console.log(res)that.setData({qrcode_image: res.path});}})//console.log(filePath)},fail: function (res) {//console.log(res)},});}})}})}
})

wxss:

/*海报 */
.imagePathBox{width: 100%;height: 100%;background: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;
}
.mask{width: 100%;height: 100%;/* background: rgba(0,0,0,0.7); */position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9000;
}
.shengcheng{width: 80%;height: 80%;position: fixed;top: 50rpx;left: 50%;margin-left: -40%;z-index: 10;
}
.baocun{display: block;width: 100%;height: 80rpx;padding: 0;line-height: 80rpx;text-align: center;position: fixed;bottom: 50rpx;left: 10%;background: #45be8d;color: #fff;font-size: 26rpx;border-radius: 44rpx;
}.shareFriends{display: block;width: 80%;height: 104rpx;padding: 0;line-height: 80rpx;text-align: center;position: fixed;bottom: 50rpx;left: 10%;background: #45be8d;color: rgb(211, 208, 208);font-size: 32rpx;border-radius: 44rpx;
}button[class="baocun"]::after{border: 0;
}
.noLogin{font-size: 30rpx;text-align: center;color: #fff;
}

OK，完工

微信小程序分享生成海报（自带二维码）+头像+昵称相关推荐

微信小程序分享生成海报
本文转自:微信小程序实现生成海报并且保存本地 - 张正-博客园 - 博客园 html: <view><image src="{{img}}" class='bgI ...
微信小程序学习之路——API获取二维码
获取二维码通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面. 可以使用开发工具 1.02.1803130 及以后版本通过二维码编译功能调试所获得的二维码为满足不 ...
微信小程序web-view 实现长按识别二维码
小程序长按识别二维码, 网页在小程序中长按识别二维码,web-view长按识别二维码效果图: html 代码: <!DOCTYPE html> <html><head& ...
微信小程序如何支持长按识别二维码功能
1.previewImage 小程序wxml <image src="{{image}}" bindtap="imgLoad"></image ...
微信小程序：实现长按扫描二维码
小程序内置扫描二维码 image 使用小程序提供的image组件,image组件上有一个show-menu-by-longpress的属性,设置为true <image show-menu-by ...
微信小程序：长按图片识别二维码
方法一:使用小程序提供的image组件,image组件上有一个show-menu-by-longpress的属性,设置为true,当image被长按时会弹出选择菜单 <image show-me ...
微信小程序 - 分享商品海报
我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀 ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
小程序长按识别公众号二维码-已实现
在做这个功能的时候,网上找了好多,都说不行,最终还是找到解决办法了. 直接说了:小程序API中的wx.previewImage可以实现,但需要先预览,再长按,比较麻烦. 小程序webview H5中放 ...

微信小程序分享生成海报（自带二维码）+头像+昵称

微信小程序分享生成海报（自带二维码）+头像+昵称相关推荐

最新文章

热门文章