Comment utiliser le mini programme pour générer des images pour votre cercle d'amis

Cet article présente principalement comment générer des images dans le cercle d'amis via le mini programme. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Le mini programme de WeChat. est Il n’y a pas de fonction de partage sur Moments. Les mini-programmes ne peuvent actuellement être partagés qu'avec des groupes ou envoyés à des amis. Mais l’entreprise doit être facilement promue et partagée avec des amis.

Après quelques recherches, j'ai eu l'idée suivante : utiliser le petit programme Canvas pour dessiner des images, et dessiner l'image d'arrière-plan et le code QR en une seule image. Après avoir fait référence à plusieurs bonnes démos de Baidu, j'ai pensé qu'il serait facile de résoudre ce problème. Cependant, ce n'est pas la difficulté du petit programme canevas ! 🎜 >

519d136da5c03418e1e944c2c050d1c2Générer un cercle d'amis partageant une photo65281c5ac262bf6d81768915a4a77ac0,

C'est le bouton qui déclenche toile

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

Dessiner le code QR de reconnaissance par appui long

Dessiner une image

  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();
  },

A l'origine, je dessinais directement les images du réseau, mais sur la vraie machine, les images du réseau ne s'affichaient pas ! J'ai donc cherché Baidu et j'ai découvert que je pouvais d'abord le télécharger, puis dessiner l'image renvoyée par l'interface

createNewImg: function () {    
var _this       = this;    
var size        = _this.setCanvasSize();    
var context     = wx.createCanvasContext('myCanvas');    
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   : '生成中...',
      icon    : 'loading',
      duration: 2000
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success : function (res) {          
        var tempFilePath = res.tempFilePath;
          _this.setData({
            imagePath   : tempFilePath,
          });     
          var img  = _this.data.imagePath;
          let urls = []
          urls.push(img, '二维码路径')   //二维码路径是为了用户也可以保存二维码，分享到朋友圈有合成的图片也有二维码（参考拉钩小程序分享）
          wx.previewImage({
            current: img,  // 当前显示图片的http链接
            urls   : urls  // 需要预览的图片http链接列表          })
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 2000);
  },

Le problème est apparu. problème de test local et de débogage à distance. Question, vous pouvez générer des images et les enregistrer sur votre téléphone

//生成朋友圈图片  createSharePic() {
    let _this = this,
        qrcode= _this.data.qrcode
    wx.downloadFile({
      url    : qrcode,
      success: function (res) {        
      if (res.statusCode === 200) {
          _this.setData({
            filePath: res.tempFilePath,
          })
          _this.createNewImg();
        }
      }
    })
    
  }

Après avoir réfléchi un moment, je me suis retrouvé. Aucun nom de domaine de téléchargement n'est ajouté en arrière-plan. Parce que généralement la case locale est cochée pour ne pas vérifier le nom de domaine. Cela fait donc longtemps que je me pose la question ! ! ! ! ! ! !

Résumé :

Le petit programme Canvas est difficile à contrôler. Utilisez rpx lors de l'écriture de styles et px pour Canvas ; >

Les images réseau ne s'affichent pas (lorsque j'utilise des images réseau, elles ne s'affichent pas. Je ne sais pas si ce problème est un problème avec mon fonctionnement ou une limitation du mini programme. J'espère que les experts pourront donnez-moi une conclusion définitive)

Vous devez définir le nom de domaine de téléchargement dans l'arrière-plan de WeChat (j'ai utilisé la méthode de dessin après le téléchargement ici. Si vous avez une méthode sans téléchargement, veuillez faites le moi savoir ! Merci)

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! Recommandations associées :

Comment utiliser les composants internes de la vue pour exécuter la fonction de mise en page

Comment utiliser le mini programme pour la mise en œuvre de l'événement de clic d'élément de liaison en boucle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!