微信小程序生成海报并保存到本地（附带二维码生成）

生而为人谁不付出谁不努力

小程序端刚刚拿到了一个新的需求说要生成一张海报用户保存图片到本地分享，话不多说直接上代码

// pages/haibao/haibao.js
Page({/*** 页面的初始数据*/data: {evalatImage:'',bgBanner:'',imagePath:"",maskHidden:false,qrcode_image:''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var  that = this;wx.getImageInfo({src: "https://m.xinjuenet.com/images/banner/b-xldh.jpg",success(res) {console.log("banner临时路径:" + res.path);that.setData({evalatImage: res.path})}})wx.getImageInfo({src: "https://m.xinjuenet.com/images/banner/b-xldh.jpg",success(res) {console.log("海报底部背景:" + res.path);that.setData({bgBanner: res.path})}})that.qrcode_image();wx.getImageInfo({src: that.data.qrcode_image,success(res) {console.log("二维码:" + res.path);that.setData({qrcode_image: res.path})}})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},//点击生成海报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;var context = wx.createCanvasContext('mycanvas');context.clearRect(0, 0, 375, 660);context.setFillStyle("#fff")context.fillRect(0, 0, 375, 660)context.save();var path = that.data.evalatImage;context.drawImage(path, 0, 0, 375, 183);var path1 = that.data.bgBanner;console.log("海报底部背景图" + path1);var path2 = that.data.qrcode_image;console.log("海报底部二维码" + path2);context.setFontSize(16);context.setFillStyle('#333');context.setTextAlign('left');context.fillText("测试结果", 60, 230);context.stroke();context.save();var titl = "分享标题";context.setFontSize(18);context.setFillStyle('#333');context.setTextAlign('left');context.font = 'normal bold 18px sans-serif';context.fillText(titl, 60, 270);context.stroke();context.save();context.setFontSize(16);context.setFillStyle('#333');context.setTextAlign('left');context.fillText("测试说明", 60, 320);context.stroke();context.save();context.drawImage(path1, 0, 550, 375, 130);var results = "分享的文本信息，布上下文 canvasID";// 测试结果说明that.dealWords({ctx: context,                     //画布上下文 canvasIDfontSize: 16,              //字体大小word: results,                   //需要处理的文字maxWidth: 270,            //一行文字最大宽度x: 60,                   //文字在x轴要显示的位置y: 340,                       //文字在y轴要显示的位置maxLine: 6                //文字最多显示的行数});context.stroke();context.save(); //保存之前的画布设置//绘制头像context.beginPath();context.arc(50, 225, 5, 0, 2 * Math.PI);context.setStrokeStyle("#c7eddd");context.setFillStyle("#44bf8c");context.clip(); //裁剪上面的圆形context.fill();//填充context.restore();//因为clip是剪切了画布  则后面所有的操作都会限制在被裁减的区域内可见  用restore可以恢复之前的设置context.closePath();context.save(); //保存之前的画布设置context.beginPath();context.arc(50, 315, 5, 0, 2 * Math.PI);context.setStrokeStyle("#c7eddd");context.setFillStyle("#44bf8c");context.clip(); //裁剪上面的圆形context.fill();//填充context.restore();context.closePath();context.save(); //保存之前的画布设置context.beginPath();context.arc(55, 610, 50, 0, 2 * Math.PI);context.setStrokeStyle("#ffe200");context.clip(); //裁剪上面的圆形context.drawImage(path2, 5, 560, 100, 100);context.restore();context.closePath();context.save(); //保存之前的画布设置context.beginPath();// context.setFontSize(16);context.setFillStyle('#fff');context.setTextBaseline("top");context.setTextAlign('left');// context.font = 'normal 18px arial';// context.fillText("预防疫情四大宅家心理健康测评", 115, 565);// context.fillText("预防疫情四大宅家心理健康测评", 115, 589);that.dealWords({ctx: context,                     //画布上下文 canvasIDfontSize: 16,              //字体大小word: titl,                  //需要处理的文字maxWidth: 240,            //一行文字最大宽度x: 115,                      //文字在x轴要显示的位置y: 540,                       //文字在y轴要显示的位置maxLine: 2                //文字最多显示的行数});context.stroke();context.closePath();context.save(); //保存之前的画布设置context.draw(true);//true表示保留之前绘制内容//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时setTimeout(function () {wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function (res) {var tempFilePath = res.tempFilePath;that.setData({imagePath: tempFilePath});},fail: function (res) {console.log(res);}});}, 1000);},//文本换行dealWords(options) {options.ctx.setFontSize(options.fontSize);//设置字体大小var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数var endPos = 0;//当前字符串的截断点for (var j = 0; j < count; j++) {var nowStr = options.word.slice(endPos);//当前剩余的字符串var rowWid = 0;//每一行当前宽度    if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取for (var m = 0; m < nowStr.length; m++) {rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度if (rowWid > options.maxWidth) {if (j === options.maxLine - 1) { //如果是最后一行options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 25);    //(j+1)*20这是每一行的高度        } else {options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 25);}endPos += m;//下次截断点break;}}} else {//如果当前的字符串宽度小于最大宽度就直接输出options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 25);}}},//点击保存到相册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: '你的APPID', //不能缺少secret: '你的APPID秘钥' //不能缺少},success: function (res) {wx.request({url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,data: {"path": "pages/index/index", //默认跳转到主页:pages/index/index，可指定"width": 200,"scene": "type=0&evaId=" + that.data.id,},responseType: 'arraybuffer', // 这行很重要,转为二进制数组header: {'content-type': 'application/json;charset=utf-8'},method: 'POST',success(res) {//转为base64let bin64 = wx.arrayBufferToBase64(res.data);that.setData({//base 64设置到页面上qrcode_image: "data:image/png;base64," + bin64});}})}})}
})

下面是页面代码

<!--pages/haibao/haibao.wxml--><button bindtap="formSubmit">点击生成海报</button><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>

下面也发一下样式文件

/* pages/mentality/result/result.wxss */
page{ background:#fff;}.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: 80%;height: 80rpx;padding: 0;line-height: 80rpx;text-align: center;position: fixed;bottom: 50rpx;left: 10%;background: #45be8d;color: #fff;font-size: 32rpx;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;
}/* canvas绘图 */
/* .canvas-box{width:0rpx;height:0rpx;overflow: hidden;position: fixed;left:0rpx;bottom:30rpx;z-index: 9999;
} */

效果图来一张

样式什么的应该可以自己布局写就好了我这个地方测试就没有太好的样式

微信小程序生成海报并保存到本地（附带二维码生成）相关推荐

微信小程序生成海报并保存在本地（组件开发）
1.将商品图片和二维码生成海报在屏幕中间子组件代码 <template><view><div class="poster"><div c ...
小程序生成海报，含用户头像用户名二维码和背景图
如果是本地资源文件,直接将data中需要绘制的图片路径赋值即可.我的需求是接口返回数据,绘制生成图片保存手机. 首先在微信公众平台填写安全域名,每个月只有5次配置域名机会,还有两次(瑟瑟发扌斗) 设置 ...
微信小程序生成海报可保存海报和分享海报
最近因为小程序生成海报分享的问题头疼了很久,所以自己总结了一下供大家参考,可以放置用户头像姓名以及商品名称价格和二维码太阳码等,实测可用! 下载链接https://download.csdn.net/ ...
微信小程序Megalo开发踩坑计-普通二维码绑定
原文首发于http://blog.yumengtao.top 首先简单说一下普通二维码绑定功能作用: 兼容线下已有的二维码能同时支持微信.支付宝小程序小程序启动传参微信小程序普通二维码资料支付 ...
微信小程序实现蓝牙打印（图片、二维码、文字）
小程序连接蓝牙打印机实现打印功能这真是一块超级难啃的骨头,我也是参考了很多文章才勉强理解,但是如果你啃动了,那你以后也有了拿得出手的资本了完整DEMO地址可直接下载下来使用搜索与连接蓝牙,这个我 ...
微信小程序生成海报无法保存到相册
公司小程序是用uniapp开发的,使用saveImageToPhotosAlbum()保存,在微信开发者工具中和真机调试都能正常运行,代码如下,在安卓真机上可以生成海报但是无法保存,苹果手机上直接无法 ...
微信小程序参数二维码生成朋友圈分享图片
前言小程序目前无法分享到微信朋友圈,可朋友圈是一个非常重要的传播途径,所以得想办法把这个资源利用起来微信小程序支持通过扫描/长按识别二维码或小程序码图片的方式进入一个小程序首页或小程序中某个特定页 ...
微信小程序生成海报中二维码-----长按识别不了问题及处理方案
> 问题描述: 小程序某个页面中点击按钮,想要生成带有二维码的图片,后续保存本地.生成图片后转发微信中,后长按图片不会出现识别图中二维码的选项问题. 一年前写过一个分享页,当时大部分可以识别,只 ...
微信小程序下载网络图片保存到本地
微信小程序下载网络图片保存到本地问题背景前一篇文章介绍了,微信小程序网络请求数据并在页面列表显示(参考 https://blog.51cto.com/baorant24/6189453 ),本文将 ...
微信小程序二维码生成工具，后端二维码生成工具类。
微信小程序开发二维码生成工具类前言业务背景设计思路具体实现接下来我们进行工具的改造前言或许这是你搜寻的第n篇文章来解决你项目中的问题,虽然我不能去替你完全适配你的业务需求,但是我可以给你 ...

微信小程序生成海报并保存到本地（附带二维码生成）

微信小程序生成海报并保存到本地（附带二维码生成）相关推荐

最新文章

热门文章