1. Generate the two-dimensional code with parameters :(using the plug-in tki-qrcode)

I did not install, is directly in the components reference inside the two files;

Git clone github.com/q310550690/… Blog.csdn.net/qq_43455397…

2. Download the image as a temporary link

In the small program, download pictures can not be downloaded more than one, only a piece of a download at the same time small program download, need to set your domain name in the small program downloadFile legal domain name, otherwise it is not a legal domain name

In the download image method, use the Promise encapsulation; Use promise.all to see if it is finished;

this.imgArr = ['image1.png'.'image2.png'];
let mainImg = _this.imgArr.map(img= > _this.wxOnloadImg(img)); // Call the download image method
Promise.all(mainImg).then(imgDown= > {
// Save the image
// Draw
})
Copy the code

3. Draw pictures

Draw the round head, first draw the circle, and then put the picture into the circle to cut the drawing success, must be written in the draw callback, otherwise it will often draw out

// Canvas position, so it will not be displayed on the page
<canvas style="width: 602px; height: 938px; position:absolute; left:-1000px; top:-1000px;" canvas-id="firstCanvas" id="firstCanvas"></canvas> 				
Copy the code
var context = uni.createCanvasContext('firstCanvas');	
context.drawImage(params.bigBg,0.0.602.938);
context.setFillStyle('#ffffff'); // Text color
context.setFontSize(28); / / size
context.fillText(params.name, 140.80,);// Draw text
context.beginPath(); // Draw the round head to start
context.arc(82.82.38.38.Math.PI * 2);
context.setFillStyle('#fff');
context.fill();
context.clip();
context.drawImage(params.headImg,41.41.76.76) // Push to the picture
context.restore();
context.draw(false.() = >{ //false Whether to keep the canvas, followed by a callback
        uni.canvasToTempFilePath({
          canvasId: 'firstCanvas'.success: function(res) {	
              // The image drawing operation succeeded
              // res.tempfilepath for image link;
              // On h5, res.tempFilePath is base64
          },
          fail:function(res){
                  console.log(res); }})});Copy the code