ミニプログラムを使用して友達のサークルに写真を生成する方法-ミニプログラム開発-php.cn

ミニプログラムを使用して友達のサークルに写真を生成する方法

不言

リリース： 2018-07-14 15:20:06

オリジナル

3300 人が閲覧しました

この記事では、主にミニプログラムを通じて友達のサークルに写真を生成する方法を紹介します。必要な友達はそれを参照できます。

WeChat のミニプログラムは共有されません。友達の輪が機能的。現在、ミニプログラムはグループで共有するか、友人に送信することのみ可能です。ただし、ビジネスを簡単に宣伝したり、友人と共有したりする必要があります。

いろいろ調べた結果、ミニプログラムキャンバスを使って絵を描き、背景画像とQRコードを一枚の絵に描くというアイデアを思いつきました。 Baidu のいくつかの優れたデモを参照した後、この問題は簡単に解決できるだろうと思いましたが、これはミニプログラムキャンバスの難しさではありません

WXML

  <view class=&#39;canvas-box&#39;>
    <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/>
    <image src=&#39;{{imagePath}}&#39;></image>  
  </view>

ログイン後にコピー

これはキャンバスをトリガーするボタンです

QR コードを識別するために長押しして描画します

  settext: function (context) {
    let _this = this;    
    var size  = _this.setCanvasSize();    
    var text  = "长按识别小程序";
    context.setFontSize(12);
    context.setTextAlign("center");
    context.setFillStyle("#000");
    context.fillText(text, size.w / 2, size.h * 0.90);
    context.stroke();
  },

ログイン後にコピー

絵

createNewImg: function () {    
var _this       = this;    
var size        = _this.setCanvasSize();    
var context     = wx.createCanvasContext(&#39;myCanvas&#39;);    
var path        = "/assets/images/qrshare1.jpg";  //测试的图片    
var imageQrCode = _this.data.filePath;　　　　　　　//二维码
    context.drawImage(path, 0, 0, size.w, size.h);
    context.drawImage(imageQrCode, size.w / 2 - 55, size.h * 0.55, size.w * 0.33, size.w * 0.33);    
    this.settext(context);    //绘制图片    
    context.draw();    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时    
    wx.showToast({
      title   : &#39;生成中...&#39;,
      icon    : &#39;loading&#39;,
      duration: 2000
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: &#39;myCanvas&#39;,
        success : function (res) {          
        var tempFilePath = res.tempFilePath;
          _this.setData({
            imagePath   : tempFilePath,
          });     
          var img  = _this.data.imagePath;
          let urls = []
          urls.push(img, &#39;二维码路径&#39;)   //二维码路径是为了用户也可以保存二维码，分享到朋友圈有合成的图片也有二维码（参考拉钩小程序分享）
          wx.previewImage({
            current: img,  // 当前显示图片的http链接
            urls   : urls  // 需要预览的图片http链接列表          })
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 2000);
  },

ログイン後にコピー

本来はネットワーク絵を直接描いたのですが、実機ではネットワーク絵が表示されませんでした！そこでBaiduを調べてみると、まずダウンロードしてからインターフェースから返された画像を描画できることが分かりました

ローカルテストとリモートデバッグでは問題なく画像を生成できます。携帯電話に保存してください