ホームページ > 記事 > WeChat アプレット > ミニプログラムを使用して友達のサークルに写真を生成する方法

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

不言オリジナル: 2018-07-14 15:20:063234ブラウズ

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

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>

70e0c37cf5772d9849d7dc02c7c850aa 友達のサークルで共有画像を生成します65281c5ac262bf6d81768915a4a77ac0,

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

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を調べてみると、まずダウンロードしてからインターフェースから返された画像を描画できることが分かりました

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

しばらく考えた後、バックグラウンドでダウンロードのダウンロードドメイン名を追加していないことがわかりました。通常、ドメイン名をチェックしないようにローカルのチェックボックスがオンになっているためです。そこで、ずっと気になっていたんです！！！！！！！

概要:

スタイルを記述するときは rpx を使用し、キャンバスには px を使用してください。

ネットワーク画像が表示されません (ネットワーク画像を使用すると表示されません)。この問題についてはよくわかりません。私の操作の問題ですか、それともミニプログラムの制限ですか?専門家が明確な結論を出してくれることを願っています)

WeChatのバックグラウンドでダウンロードドメイン名を設定する必要があります。私はここでダウンロードしてから描画する方法を使用しました。もしあれば、ダウンロード方法を教えてください。ありがとうございます)

以上が、皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

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

関連記事