yii2 php 生成小程序分享海报的两种方法

前段时间做了个小程序-爱小环保，现在要给它加一个生成海报分享朋友圈的功能。

先简单介绍下这个小程序，主要是号召大家随手捡垃圾，如果你在马路上见到别人随手丢的垃圾，可以将它拍下来，然后丢到垃圾桶，拍下来的照片可以发布到这个小程序上，一是记录一下自己对干净家园的行动，二是希望更多看到的人约束自己，不要随手丢垃圾。

就当是打个广告了，现在进入正题，研究后发现要实现小程序生成海报基本有两种方法
1、在小程序端用canvas画图生成
2、在后端生成传到小程序端

下面就讲一下这两种方法

一、canvas实现

只要有了素材，便可以在canvas上绘制出来了，小程序二维码素材，一般也有两种，一是特定页面(可能带参数)的二维码，二是小程序主页

1、跳转小程序主页

如果希望用户识别小程序码后直接跳到小程序主页，那就不用调用接口生成特定二维码，直接下载小程序码作为素材就可以，这时候将小程序码放到static/images文件夹里就可以直接绘制了，代码如下：

 //分享share: function(e){wx.showLoading({title: '正在生成图片...',mask: true,})var that = thisvar index = e.target.dataset.id;that.setData({index:index})wx.getImageInfo({src: that.data.litters[index].picurl,//这里是我获取的用户上传的垃圾图片success:function(res){that.drawSharePic(res.path)//实际绘图函数}})}//生成分享图片drawSharePic:function(litterPath){    const canvasCtx = wx.createCanvasContext('shareCanvas');//canvasid//绘制背景canvasCtx.setFillStyle('white');canvasCtx.fillRect(0, 0, 240, 360);canvasCtx.setFontSize(13);canvasCtx.setFillStyle('#333333');const text = "我在"+this.data.litters[this.data.index].address+"捡到了垃圾"var len = text.lengthif(len<=18){canvasCtx.fillText(text, 6, 20);}else{canvasCtx.fillText(text.substr(0,18),6,20)canvasCtx.fillText(text.substr(18, len-18), 6, 40)}const text1 = "我们的家园在我的努力下干净了一点点"const text2 = "识别二维码去守卫干净家园"canvasCtx.drawImage(litterPath, 70, 50, 100, 145);canvasCtx.fillText(text1, 10, 230);canvasCtx.drawImage('/static/images/qrcode.jpg', 90, 250, 60, 60);//我的小程序码canvasCtx.setFontSize(9);canvasCtx.fillText(text2, 65, 330);canvasCtx.draw();wx.hideLoading()  },//保存分享图片saveSharePic:function(){var that = this;wx.canvasToTempFilePath({x: 0,y: 0,width: 240,height: 360,destWidth: 240,destHeight: 360,canvasId: 'shareCanvas',success: function (res) {wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showModal({title: '存图成功',content: '图片成功保存到相册了，可以去发朋友圈啦',showCancel: false,confirmText: '好哒',confirmColor: '#72B9C3',success: function (res) {if (res.confirm) {}}})}})     },fail: function (res) {console.log(res)}})},

前端代码：

<canvas style="margin:0 auto;margin-bottom:20px;width: 240px; height: 360px;" canvas-id="shareCanvas"></canvas>
<view style="text-align:center;padding-bottom:10px"><button  bindtap='saveSharePic' type="primary" size='mini'>保存到相册,分享至朋友圈</button></view>

2、跳转特定页面

如果希望用户跳到特定页面，例如通过海报分享某个商品出去，自然是希望用户识别后直接跳到商品页，这时候就需要调用接口生成小程序码了。代码和上面的区别就在于我们需要在后端通过接口获取特定的小程序码然后传给小程序

share: function(e){wx.showLoading({title: '正在生成图片...',mask: true,})var that = thisvar index = e.target.dataset.id;that.setData({index:index})wx.getImageInfo({src: that.data.litters[index].picurl,success:function(res){that.setData({litterPicPath:res.path})}})wx.request({url: 'https://mydomain/site/qrcode',success:function(res){wx.getImageInfo({//因为绘制需要的是图片本地地址，因此使用这个函数src: res.data,success:function(res){that.drawSharePic(that.data.litterPicPath,res.path)wx.hideLoading()            }})}})},//生成分享图片drawSharePic:function(litterPath,qrcodePath){    const canvasCtx = wx.createCanvasContext('shareCanvas');//绘制背景canvasCtx.setFillStyle('white');canvasCtx.fillRect(0, 0, 240, 360);canvasCtx.setFontSize(13);canvasCtx.setFillStyle('#333333');const text = "我在"+this.data.litters[this.data.index].address+"捡到了垃圾"var len = text.lengthif(len<=18){canvasCtx.fillText(text, 6, 20);}else{canvasCtx.fillText(text.substr(0,18),6,20)canvasCtx.fillText(text.substr(18, len-18), 6, 40)}const text1 = "我们的家园在我的努力下干净了一点点"const text2 = "识别二维码去守卫干净家园"canvasCtx.drawImage(litterPath, 70, 50, 100, 145);canvasCtx.fillText(text1, 10, 230);canvasCtx.drawImage(qrcodePath, 90, 250, 60, 60);canvasCtx.setFontSize(9);canvasCtx.fillText(text2, 65, 330);canvasCtx.draw();wx.hideLoading()   },

后端获取小程序码代码：

public function actionQrcode(){//验证access_token是否过期$token_path = __DIR__."/../web/access_token";$life_time = 7200;if(file_exists($token_path)&&time()-filemtime($token_path)<$life_time){$access_token = file_get_contents($token_path);}else{$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);$output = curl_exec($ch);curl_close($ch);$output = json_decode($output);$access_token = $output->access_token;file_put_contents($token_path, $access_token);}//官方有三个接口，这里用的第二个，获取小程序码不限个数$url_qrcode = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='.$access_token;//参数可到官方文档查看$post_data = ['scene' => 'qrcode','page'  => 'pages/start/start'//小程序码链接的页面];$ch = curl_init();       curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);curl_setopt($ch, CURLOPT_URL, $url_qrcode);curl_setopt($ch, CURLOPT_POST, 1);curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($post_data));$qrcode = curl_exec($ch);curl_close($ch);$time = time();//将接口返回的内容存储为图片file_put_contents(__DIR__."/../web/img/".$time.".jpg", $qrcode);return "图片url";        }

经过以上步骤，我生成的海报如下

二、后端直接生成海报

用上面方法生成的海报会有些单调，其实我们可以直接在后台生成，这样可以选择不同的背景图片
前端代码如下：

//用户可以选择背景主题
<view style="text-align:center;color:white;margin-top:10px">选择主题</view><view style="text-align:center;margin:20px 0"><image src="/static/images/style1.jpg" id="style1" bindtap='chooseImg' data-id="1" style="width:30%;margin-right:5px;height:350rpx" mode='aspectFit' class="{{choosed1?'active':''}}"></image><image src="/static/images/style2.jpg" id="style2" bindtap='chooseImg' data-id="2" style="width:30%;margin-right:5px;height:350rpx" mode='aspectFit' class="{{choosed2?'active':''}}"></image><image src="/static/images/style3.jpg" id="style3" bindtap='chooseImg' data-id="3" style="width:30%;height:350rpx" mode='aspectFit' class="{{choosed3?'active':''}}"></image></view><view style="text-align:center;padding-bottom:10px"><button  bindtap='getCard' type="primary" size='mini'>生成分享卡片</button></view>//选择主题chooseImg:function(e){var id = e.target.dataset.idvar str = "choosed"+idvar style = "style"+idconsole.log(id)this.setData({choosed1:false,choosed2:false,choosed3:false,style:style})this.setData({[str]:true})},//获取海报getCard:function(){    var that = thisif(!this.data.choosed1&&!this.data.choosed2&&!this.data.choosed3){wx.showToast({title: '请选择主题',icon: 'none',duration: 2000})}else{this.setData({showDialog2: false})wx.showLoading({title: '正在生成卡片...',mask: true,})wx.request({url: 'https://mydomain/site/getcard',data:{style:that.data.style,litterid:that.data.index},success:function(res){wx.hideLoading()that.setData({cardUrl:res.data,showDialog3:true})}})}},//保存海报saveCard:function(){var that = this;wx.getImageInfo({src: that.data.cardUrl,success:function(res){wx.saveImageToPhotosAlbum({filePath: res.path,success(res) {wx.showModal({title: '存图成功',content: '图片成功保存到相册了，可以去发朋友圈啦',showCancel: false,confirmText: '好哒',confirmColor: '#72B9C3',success: function (res) {if (res.confirm) {that.setData({showDialog3:false})}}})}})  }})},//分享share: function(e){var litterid = e.target.id; this.setData({showDialog2:true,index: litterid})},

后端代码如下：

//获取分享海报public function actionGetcard(){$get = Yii::$app->request->get();$litterid = $get['litterid'];$style = $get['style'];       $litter = Litter::findOne($litterid);$addr = $litter['address'];$pic = $litter['picurl'];$bg_path = __DIR__."/../web/img/".$style.".jpg";$bg_content = file_get_contents($bg_path);$bg_source = imagecreatefromstring($bg_content);$color = imagecolorallocate($bg_source, 0, 0, 0);$text = "我在".$addr."捡到了垃圾";$len = mb_strlen($text);if($len<=20){imagettftext($bg_source, 20, 0, 50, 80, $color,  __DIR__."/../web/fonts/msyh.ttc", $text);}else{imagettftext($bg_source, 20, 0, 50, 80, $color,  __DIR__."/../web/fonts/msyh.ttc", mb_substr($text,0,20));imagettftext($bg_source, 20, 0, 50, 110, $color,  __DIR__."/../web/fonts/msyh.ttc", mb_substr($text,20,$len-20));}list($width,$height) = getimagesize($pic);$pic_content = file_get_contents($pic);$pic_source = imagecreatefromstring($pic_content);imagecopy($bg_source, $pic_source, 195, 160, 0, 0, $width, $height);imagedestroy($pic_source);$time = time();$path = __DIR__."/../web/img/card/".$time.".jpg";imagejpeg($bg_source,$path);imagedestroy($bg_source);return "图片url";}

使用流程如下：

生成的卡片如下：

以上就是教程全部内容了，文末送福利