First, prepare materials (pictures and text)

Prepare materials and required text according to business requirements

Second, understand the wechat API

Wx.createselectorquery (), wx.createcontext (), wx.DrawCanvas), etc.

Third, the realization of ideas

Define a Canvas container that dynamically calculates images, text sizes, and displays them anywhere on the canvas as required

Fourth, picture synthesis

  • Two options: reactive posters | | high fixed wide posters
  • One, responsive posters
Query with the wx.createsElectorQuery () node to obtain the canvas width and height by calculating the proportional dynamic width and heightCopy the code
  • Two, fixed width and height
Advantages: simple, disadvantages: bad for user experienceCopy the code

Let’s cut to the chase:

Const query = wx.createsElectorQuery () query.select() const query = wx.createsElectorQuery () const query = wx.createsElectorQuery ()'.myCanvas').boundingClientRect(function(rect) {//rect.width width of canvas //rect.height of canvas}).exec() * Var Context = wx.createcontext () * Draws an image to the canvas. Context. DrawImage (img, sx, sy, swidth, sheight, x, y, width, height) sx, sy, swidth, sheight sx started four as optional parameter x coordinate location of shear. Sy is the y position where the shear starts. Swidth The width of the image to be clipped. Sheight Indicates the height of the clipped image. If img is network image: wx.getimageinfo ({SRC: network address,// server returned image address success:function(res) {//res.path}}) Draw text context.filltext (text,x,y,maxWidth) on canvas; Text: Draw text x: The x-coordinate position (relative to the canvas) at which the text is to be drawn. Y: Start drawing the y-coordinate position of the text (relative to the canvas). MaxWidth Specifies the maximum allowed text width, in pixels. If you also want to give control over text size or color: context.setfontSize //setFontSize FontSize for painting text context.strokeStyle="Rgba (255,0,0,0.5)"; //strokeStyle is used to stroke context.fillstyle ="Rgba (255,0,0,0.5)"; / / fillStyle filling style * draw a circle, then head is used to map the user context. The beginPath () / / to create a path to the context. The arc (x, y, r, sAngle eAngle, counterclockwise). // Draw the x-coordinate of the center of the circle. The y coordinate of the center of the y circle. Radius of r circle. The initial Angle, measured in radians (the three o 'clock position of the circle of an arc is 0 degrees). EAngle End Angle, measured in radians. Counterclockwise is optional. Specifies whether to draw counterclockwise or clockwise. False = clockwise,true= counterclockwise. Context. The clip () / / cutting context. DrawImage (img, sx, sy, swidth, sheight, x, y, width, height) / / draw the picture up the context. The save (); // Save the current drawing state context.restore() // restore the previously saved drawing context // call wx.drawcanvas to specify which canvas to draw on via canvasId, Wx. drawCanvas({canvasId:'myCanvas', actions: context.getActions() // Get drawing action array}); ** So far this picture text has been painted successfully **Copy the code

Five, cut the canvas area to generate pictures

Wx.canvastotempfilepath ({x: 100, y: 200, width: 50, height: 50, destWidth: 50, destWidth: 100, // // The output image height (height* screen pixel density) canvasId:'myCanvas', success(res) {console.log(res.tempFilepath) // generate file temporary path}}) destWidth and destHeight Impact the user experience Don't think that this step is over, there is one last step ~!Copy the code

Six, picture download

Wx. SaveImageToPhotosAlbum ({filePath: res. TempFilePath success (res) {}}) to download temporary generated image path, save the user's phone photo albumsCopy the code

Generation of two-dimensional code will not speak, generally generated by the back end, you can also use cloud development to call their API generated small program