成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信小程序 海報生成踩坑記

lidashuang / 758人閱讀

摘要：最近有個需求是要生成分享海報，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求，可是萬萬沒想到，微信會這么坑。

最近有個需求是要生成分享海報，讓用戶可以將圖片保存到本地然后分享到朋友圈。本來以為是一個很簡單的需求，可是萬萬沒想到，微信會這么坑。
剛開始的思路是這樣的：

后臺根據(jù)小程序傳過來的參數(shù)獲取對應(yīng)的小程序碼，然后與背景圖合成之后將base64格式的圖片傳給小程序，這樣就可以不用保存圖片了。但是經(jīng)過嘗試之后有兩個坑

坑1：小程序?qū)ase64圖片支持不友好，模擬器上圖片可以顯示，真機(jī)無法顯示

坑2：小程序canvas繪圖必須使用網(wǎng)絡(luò)圖片或者本地圖片，但是如果直接在wx.drawImage傳入圖片鏈接，真機(jī)上面會顯示失敗

Google一番之后，算是把這倆坑填上了。在此記錄一下，有錯誤的地方還請大神輕噴。

首先是解決base64圖片的問題，既然小程序支持的不好，那我們就保存在服務(wù)器好了，下面是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標(biāo)簽的形式。為了防止以后可能對圖片進(jìn)行別的處理，我使用了canvas的方式。

此時如果直接使用后臺傳過來的圖片路徑的話，就會遇到第二個坑:在真機(jī)上面圖片是顯示不出來的。因此我們需要先使用wx.downloadFile將圖片下載下來。嗯，代碼差不多就是下面這樣：

/***********************************************/
/**調(diào)用接口獲取圖片路徑。。。代碼太爛省略了。。。**/
/**********************************************/
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) {
    /***/
  }
})

此時，圖片應(yīng)該可以正常的在真機(jī)上面顯示了。接下來就是下載圖片到本地了，解決了上面兩個坑之后這塊就沒什么大問題了，簡單貼一下代碼：

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) {
        /***/
      }
    })
  }
});

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/29438.html

相關(guān)文章

  • Canvas繪圖在微信小程序中的應(yīng)用:生成個性化海報

    摘要：解析進(jìn)到首頁其實關(guān)鍵字在本地就隨機(jī)取完了，在首頁中的方法中就通過緩存了要畫的元素，比如關(guān)鍵字這里是圖片關(guān)鍵字解析語也是圖片畢竟微信小程序的不支持字體等等。 一、Canvas應(yīng)用的背景(個人理解)及基礎(chǔ)語法 背景 從2012年開始，微信那個時候用戶的積累的量已經(jīng)非常大了，推出公眾號，當(dāng)然大屏智能手機(jī)在那個時候也流行，傳統(tǒng)的大眾媒體逐步消亡，像微信公眾號這樣的新媒體盛行。企業(yè)的廣告投入開始...

    vpants 評論0 收藏0

  • 微信小程序海報生成組件封裝

    摘要：每個小程序成型后，一般都會選擇生成帶菊花碼的海報分享出去來吸引更多的流量。 每個小程序成型后，一般都會選擇生成帶菊花碼的海報分享出去來吸引更多的流量。下面來介紹下他的一種實現(xiàn)方式吧 組件Github地址: https://github.com/WGinit/min... 原理：主要利用微信小程序強(qiáng)大的Canvas API來合成，生成后可用wx.canvasToTempFilePath(...

    Hwg 評論0 收藏0

  • 支付寶小程序爬坑記、支付寶與微信小程序的區(qū)別。

    摘要：上線時間問題發(fā)布審核時間，微信小時內(nèi)會審核完成，但是支付寶官方公示是上線審核需要三到五個工作日，據(jù)親測，實際支付寶審核印版不會超過小時，但是支付寶的審核相比較微信真的很嚴(yán)格。 前言： 最近一個月接收一個支付寶小程序項目，并進(jìn)行原生開發(fā)，現(xiàn)將遇到的問題，爬過的坑給大家進(jìn)行分享，希望讀者可以少走彎路，以下介紹的內(nèi)容將從大方面到細(xì)節(jié)進(jìn)行展開。 廢話少言，直接開始步入正題 ①：上傳、發(fā)布問...

    WilsonLiu95 評論0 收藏0

  • Wepy-小程序踩坑記

    摘要：引言用過原生開發(fā)的小程序也知道除了其他功能性的內(nèi)容并不多對于需要做大型項目來說是比較難入手的，因此朋友推薦的我就入坑鳥。。。開發(fā)還是和部分有出入，因此如下記錄，入手的教程就不發(fā)了只發(fā)踩坑。 引言 用過原生開發(fā)的小程序也知道除了api 其他功能性的內(nèi)容并不多對于需要做大型項目來說是比較難入手的，因此朋友推薦的wepy我就入坑鳥。。。這么一個跟vue的開發(fā)方式類似的框架，不過說起來跟vue...

    tinna 評論0 收藏0

  • fastposter 2.4.0 全新發(fā)布 低代碼海報生成器

    摘要：支持等多種語言。全新發(fā)布低代碼海報生成器生成二維碼 fastposter 2.4.0 全新發(fā)布 低代碼海報生成器fastposter低代碼海報生成器，一分鐘完成海報開發(fā)。支持??Java??、??Python??、??PHP??、 ??Go??、??JavaScript??等多種語言。v2.4.0 全新發(fā)布 電商級海報生成...

    番茄西紅柿 評論0 收藏2637

發(fā)表評論

0條評論

lidashuang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<