ミニプログラムに写真を保存してモーメントに共有する機能を実装

今回は、モーメントで写真を保存して共有するミニプログラムの機能の実装について説明します。モーメントで写真を保存して共有するミニプログラムの機能を実装する際の注意点は何ですか?一見。

説明

まず、ミニプログラム内でモーメントに直接共有することはできません。したがって、私たちができるのは、写真を生成し、ミニ プログラムの QR コードを送信し、携帯電話のアルバムに保存し、ユーザーが友人のサークルに送信することを選択できることだけです。ミニプログラム内のQRコードを認識すると、ミニプログラムの指定ページにアクセスできます。共有をサポートする市販のアプリケーションを参照すると、基本的にはこのように実装されています。

準備段階

1. サーバーを通じてミニプログラムコードを取得します

ここで、WeChatの公式ドキュメントを参照し、背景のパラメータ、パス、その他の情報を指定して、背景を生成できるようにします。指定されたミニプログラムコード。次に、wx.getImageInfo を呼び出して、バックグラウンドで生成された小さなプログラム コードを保存します。

ミニプログラムコードを生成する公式サーバーが存在しない場合は、WeChat のドキュメントをよく読んでください。これも非常に面倒で、デバッグには不便です。

wx.getImageInfo({            
  src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址
  success: function (res) {
    //res.path是网络图片的本地地址
    qrCodePath = res.path;
  },
  fail: function (res) {
    //失败回调
  }
});

1. キャンバスに必要な情報を描画します

すべての画像を準備したら、キャンバスに描画し、画像としてキャンバスをエクスポートします。描画に関してはWeChatのcanvas APIを参照してください。以下は基本的にAPIメソッドに基づいています。

注意すべき点がいくつかあります。

1. 描画した文字の長さが分からないので、どのタイミングで文字を折り返せば良いのか分かりません。そのため、商品タイトルなどは、1行あたり18文字に固定されている場合があります。

2. 描いた絵のエクスポートについてですが、公式APIではdraw()完了のコールバックで実行されるはずですが、

canvasCtx.draw(false,function(res){
});

このメソッドではコールバックが完了しません。何が問題だったのか分かりません。そのため、最終的には画像を保存するために遅延を追加する必要がありました。

/**
 * 绘制分享的图片
 * @param goodsPicPath 商品图片的本地链接
 * @param qrCodePath 二维码的本地链接
 */
drawSharePic: function (goodsPicPath, qrCodePath) {
  wx.showLoading({
    title: '正在生成图片...',
    mask: true,
  });
  //y方向的偏移量，因为是从上往下绘制的，所以y一直向下偏移，不断增大。
  let yOffset = 20;
  const goodsTitle = this.data.orderDetail.paltProduct.name1;
  let goodsTitleArray = [];
  //为了防止标题过长，分割字符串,每行18个
  for (let i = 0; i < goodsTitle.length / 18; i++) {
    if (i > 2) {
      break;
    }
    goodsTitleArray.push(goodsTitle.substr(i * 18, 18));
  }
  const price = this.data.orderDetail.price;
  const marketPrice = this.data.orderDetail.marketPrice;
  const title1 = '您的好友邀请您一起分享精品好货';
  const title2 = '立即打开看看吧';
  const codeText = '长按识别小程序码查看详情';
  const imgWidth = 780;
  const imgHeight = 1600;
  const canvasCtx = wx.createCanvasContext('shareCanvas');
  //绘制背景
  canvasCtx.setFillStyle('white');
  canvasCtx.fillRect(0, 0, 390, 800);
  //绘制分享的标题文字
  canvasCtx.setFontSize(24);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  canvasCtx.fillText(title1, 195, 40);
  //绘制分享的第二行标题文字
  canvasCtx.fillText(title2, 195, 70);
  //绘制商品图片
  canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);
  //绘制商品标题
  yOffset = 490;
  goodsTitleArray.forEach(function (value) {
    canvasCtx.setFontSize(20);
    canvasCtx.setFillStyle('#333333');
    canvasCtx.setTextAlign('left');
    canvasCtx.fillText(value, 20, yOffset);
    yOffset += 25;
  });
  //绘制价格
  yOffset += 8;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle('#f9555c');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText('￥', 20, yOffset);
  canvasCtx.setFontSize(30);
  canvasCtx.setFillStyle('#f9555c');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText(price, 40, yOffset);
  //绘制原价
  const xOffset = (price.length / 2 + 1) * 24 + 50;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle('#999999');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText('原价:¥' + marketPrice, xOffset, yOffset);
  //绘制原价的删除线
  canvasCtx.setLineWidth(1);
  canvasCtx.moveTo(xOffset, yOffset - 6);
  canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);
  canvasCtx.setStrokeStyle('#999999');
  canvasCtx.stroke();
  //绘制最底部文字
  canvasCtx.setFontSize(18);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  canvasCtx.fillText(codeText, 195, 780);
  //绘制二维码
  canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);
  canvasCtx.draw();
  //绘制之后加一个延时去生成图片，如果直接生成可能没有绘制完成，导出图片会有问题。
  setTimeout(function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 390,
      height: 800,
      destWidth: 390,
      destHeight: 800,
      canvasId: 'shareCanvas',
      success: function (res) {
        that.setData({
          shareImage: res.tempFilePath,
          showSharePic: true
        })
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(res)
        wx.hideLoading();
      }
    })
  }, 2000);
},

最後に、描画されたレンダリングを見てみましょう。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンドメソッドを使用して写真をキャラクター絵に変換する

JS配列メソッドを使用する手順の詳細な説明

以上がミニプログラムに写真を保存してモーメントに共有する機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。