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

lidashuang 发布于2019-07-01 10:45 / 753人阅读

摘要：最近有个需求是要生成分享海报，让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求，可是万万没想到，微信会这么坑。

最近有个需求是要生成分享海报，让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求，可是万万没想到，微信会这么坑。
刚开始的思路是这样的：

后台根据小程序传过来的参数获取对应的小程序码，然后与背景图合成之后将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) {
        /***/
      }
    })
  }
});

GPU云服务器云服务器微信小程序生成免费生成微信小程序踩坑记微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29438.html

Canvas绘图在微信小程序中的应用:生成个性化海报

摘要：解析进到首页其实关键字在本地就随机取完了，在首页中的方法中就通过缓存了要画的元素，比如关键字这里是图片关键字解析语也是图片毕竟微信小程序的不支持字体等等。一、Canvas应用的背景(个人理解)及基础语法背景从2012年开始，微信那个时候用户的积累的量已经非常大了，推出公众号，当然大屏智能手机在那个时候也流行，传统的大众媒体逐步消亡，像微信公众号这样的新媒体盛行。企业的广告投入开始...

vpants 2019-08-23 12:11 评论0 收藏0
微信小程序海报生成组件封装

摘要：每个小程序成型后，一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。每个小程序成型后，一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。下面来介绍下他的一种实现方式吧组件Github地址: https://github.com/WGinit/min... 原理：主要利用微信小程序强大的Canvas API来合成，生成后可用wx.canvasToTempFilePath(...

Hwg 2019-08-23 10:43 评论0 收藏0
支付宝小程序爬坑记、支付宝与微信小程序的区别。

摘要：上线时间问题发布审核时间，微信小时内会审核完成，但是支付宝官方公示是上线审核需要三到五个工作日，据亲测，实际支付宝审核印版不会超过小时，但是支付宝的审核相比较微信真的很严格。前言：最近一个月接收一个支付宝小程序项目，并进行原生开发，现将遇到的问题，爬过的坑给大家进行分享，希望读者可以少走弯路，以下介绍的内容将从大方面到细节进行展开。废话少言，直接开始步入正题 ①：上传、发布问...

WilsonLiu95 2019-08-26 10:15 评论0 收藏0
Wepy-小程序踩坑记

摘要：引言用过原生开发的小程序也知道除了其他功能性的内容并不多对于需要做大型项目来说是比较难入手的，因此朋友推荐的我就入坑鸟。。。开发还是和部分有出入，因此如下记录，入手的教程就不发了只发踩坑。引言用过原生开发的小程序也知道除了api 其他功能性的内容并不多对于需要做大型项目来说是比较难入手的，因此朋友推荐的wepy我就入坑鸟。。。这么一个跟vue的开发方式类似的框架，不过说起来跟vue...

tinna 2019-08-22 15:34 评论0 收藏0
fastposter 2.4.0 全新发布低代码海报生成器

摘要：支持等多种语言。全新发布低代码海报生成器生成二维码 fastposter 2.4.0 全新发布低代码海报生成器fastposter低代码海报生成器，一分钟完成海报开发。支持Java、Python、PHP、 Go、JavaScript等多种语言。v2.4.0 全新发布电商级海报生成...

番茄西红柿 2021-11-25 09:43 评论0 收藏2637