Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Catch a wave of heat

On the occasion of China’s national celebration, the outdated wechat profile picture is a small hot topic every year. As an article writer, of course, it is a hot topic.

On the home page, I saw some friends using CSS or other methods to achieve a wave. I thought, they use JS or CSS to achieve a wave. I can’t give feedback to users, but the canvas of JavaScript can provide JPG pictures. Wouldn’t it be more appropriate?

First find a wave of material; This is the ultimate effect

Then we can find the national flag and make the corresponding PNG parts of the red flag respectively. Here we take the single picture as an example, and the other parts are the same.

As shown in the picture above, deduct the gray part in the middle to retain the overall frame width and height. Then combine the images in the canvas.

After selecting the image using uniApp’s Input component, get the temporary address of the image.

previewImage() {
  var _this = this;
  uni.showLoading({
    title: 'Picture being generated... '
  });
  // Write the image to the canvas
  const ctx = uni.createCanvasContext('myCanvas');
  CanvasT = (_this.cutt / _this.cropperh) * (_this.imageh / pixelRatio)
  var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W - 4;
  var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H - 4;
  var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W + 2;
  var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H + 2;
  ctx.drawImage(_this.imageSrc, 0.0, IMG_REAL_W, IMG_REAL_H);
  ctx.globalCompositeOperation = 'destination-in';
  ctx.fillStyle = '#fff';
  ctx.arc(canvasL + canvasW / 2, canvasT + canvasW / 2, canvasW / 2.0.2*Math.PI);
  ctx.fill();
  ctx.globalCompositeOperation = 'lighter';
  ctx.fillStyle = '# 000';
  ctx.fillRect(0.0, _this.imageW, _this.imageH);
  // You can draw it on canvas only after you are sure
  ctx.draw(false.() = > {
    uni.canvasToTempFilePath({
      x: canvasL,
      y: canvasT,
      width: canvasW,
      height: canvasH,
      destWidth: SCREEN_WIDTH * 0.8.destHeight: SCREEN_WIDTH * 0.8.canvasId: 'myCanvas'.quality: 1.success: function(res) {
        uni.hideLoading();
        // Where the address was successfully obtained
        uni.previewImage({
          current: ' '.// HTTP link for the current display image
          urls: [res.tempFilePath] // List of HTTP links for images to preview
        });
      },
      fail: err= > {
        console.log(err); }}); }); },Copy the code

After that, an option will be provided for the user to choose, and the selected PNG image will be placed on top of the avatar.

uni.canvasToTempFilePath({
  x: 100.y: 200.width: 50.height: 50.destWidth: 100.destHeight: 100.canvasId: 'myCanvas'.success: function(res) {
    // On H5, tempFilePath is base64
    console.log(res.tempFilePath)
  } 
})
Copy the code