How to use the mini program to generate pictures for your circle of friends

This article mainly introduces how to generate pictures in the circle of friends through the mini program. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

The mini program of WeChat is There is no function of sharing to Moments. Mini programs can currently only be shared to groups or sent to friends. But the business needs to be easily promoted and shared with friends.

After Du Niang, I came up with the following idea: use the small program canvas to draw pictures, and draw the background image and QR code into one picture. After referring to several good demos from Baidu, I thought it would be easy to solve this problem. However, this is not the difficulty of the small program canvas!

　WXML

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

Generate a circle of friends sharing picture,

This is the button that triggers canvas

Drawing long press recognition QR code

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

Drawing picture

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

Originally I draw the network pictures directly, but on the real machine, the network pictures are not displayed! So I searched Baidu and found that I could download it first and then draw the image returned by the interface.

//生成朋友圈图片  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();
        }
      }
    })
    
  }

The problem came out. There was no problem in local testing and remote debugging. You can generate pictures and save them to your phone

After wondering for a while, I found that I had no background Add the download domain name of download. Because usually the local check box is checked not to check the domain name. So I’ve been wondering about this for a long time! ! ! ! ! ! !

Summary:

The small program canvas is difficult to control. Use rpx when writing styles and px for canvas;

Network pictures are not displayed (when I use network pictures, they are not displayed. I am not sure whether this problem is a problem with my operation or a limitation of the mini program. I hope the experts can give me a definite conclusion)

To set the download domain name in the WeChat background (I used the method of drawing after downloading here, if you have a method without downloading, please let me know! Thank you)

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

The use of small programs such as and the use of view internal components to perform page layout functions

The use of small programs for Implementation of loop binding item click event

The above is the detailed content of How to use the mini program to generate pictures for your circle of friends. For more information, please follow other related articles on the PHP Chinese website!