E企盈营销工具技术服务商 热线:4006-838-530

微信小程序海报生成踩坑记

E企盈直播平台营销卖货系统

最近有个需求是要生成分享海报,让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求,可是万万没想到,微信会这么坑。刚开始的思路是这样的:后台根据小程序传过来的参数获取对应的小程序码,然后与背景图合成之后将base64格式的图片传给小程序,这样就可以不用保存图片了。但是经过尝试之后有两个坑坑1:小程序对base64图片支持不友好,模拟器上图片可以显示,真机无法显示坑2:小程序canvas绘图必须使用网络图片或者本地图片,但是如果直接在wx.drawImage传入图片链接,真机上面会显示失败Google一番之后,算是把这俩坑填上了。在此记录一下,有错误的地方还请大神轻喷。首先是解决base64图片的问题,既然小程序支持的不好,那我们就保存在服务器好了,下面是Laravel合成图片的简单代码:public function getPoster(Request $request){    $token = $request-input(‘token’);    $uid = MembersToken::getUidByToken($token);    if (file_exists(public_path() . ‘/poster/’ . $uid . ‘.png’)) {        return response()-json([            ‘status’ = ‘success’,            ‘data’ = ‘/poster/’ . $uid . ‘.png’        ]);    }    $access_token = Cache::get(‘access_token’);    if (!$access_token) {        $appid = config(‘wechat.appid’);        $secret = config(‘wechat.secret’);        $url = “https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}”;        $data = curl_request($url);        $data = json_decode($data,true);        if (isset($data[‘errcode’]) || empty($data)) {            throw new ApiException(200,$data[‘errmsg’],null,[],600001);        }        $access_token = $data[‘access_token’];        $expires_in = $data[‘expires_in’];        Cache::put(‘access_token’,$access_token,120);    }    //获取小程序码    $code_url = ‘https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=’ . $access_token;    $post = [        “page” = “pages/maps/maps”,        “scene” = $uid,    ];    $data = curl_request($code_url, $post);    $data = base64_encode($data);    $data = Image::make($data)-resize(200, 200);    //将二维码插入背景图    $img = Image::make(public_path().’/img/book.png’);    $img-insert($data, ‘bottom-right’, 0, 0);    $res = $img-save(public_path() . ‘/poster/’ . $uid . ‘.png’);    return response()-json([        ‘status’ = ‘success’,        ‘data’ = ‘/poster/’ . $uid . ‘.png’    ]);}小程序获取到图片路径之后,可以使用canvas绘图的方式显示图片也可以直接使用image标签的形式。为了防止以后可能对图片进行别的处理,我使用了canvas的方式。此时如果直接使用后台传过来的图片路径的话,就会遇到第二个坑:在真机上面图片是显示不出来的。因此我们需要先使用wx.downloadFile将图片下载下来。嗯,代码差不多就是下面这样:/***********************************************//**调用接口获取图片路径。。。代码太烂省略了。。。**//**********************************************/wx.downloadFile({  url: app.globalData.domain + res.data.data,  success: function (res) {    var path = res.tempFilePath    var width = _this.data.windowW;    var height = _this.data.windowH – 50;    const ctx = wx.createCanvasContext(‘poster’);    ctx.drawImage(path, 0, 0, width, height);    ctx.draw(true);    wx.hideLoading();  },   fail: function (res) {    /***/  }})此时,图片应该可以正常的在真机上面显示了。接下来就是下载图片到本地了,解决了上面两个坑之后这块就没什么大问题了,简单贴一下代码:saveImg: function () {var _this = this;var windowW = _this.data.windowW;var windowH = _this.data.windowH – 50;wx.canvasToTempFilePath({  x: 0,  y: 0,  width: windowW,  height: windowH,  destWidth: windowW,  destHeight: windowH,  canvasId: ‘poster’,  success: function (res) {    wx.saveImageToPhotosAlbum({      filePath: res.tempFilePath,      success(res) {        /***/      },      fail(res) {        /***/      },      complete(res) {        /***/      }    })  }});

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序海报生成踩坑记
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏