In daily development needs, canvas drawing is often encountered to generate poster drawing, among which the most common drawing element is image. Generally speaking, images are rendered by zooming (the following two zooming modes refer to the rendering mode of image component of wechat applet).

aspectFIt

Zoom mode: Keeps aspect ratio to zoom the image so that the long side of the image is fully displayed. In other words, the image can be displayed completely.

The illustration

aspectFill

Zoom mode, keeping aspect ratio zoom image, only the short side of the image can be fully displayed. That is, the image is usually complete only in the horizontal or vertical direction, the other direction will be truncated.

The illustration

implementation

Canvas. drawImage is used to draw an image on the canvas. It can be called in one of the following ways:

context.drawImage(img,dx,dy,dw,dh);
context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
Copy the code

The parameter value

parameter describe
img The image to draw
sx Crop the x coordinate in the upper right corner of the box
sy Crop the y coordinate in the upper right corner of the box
sw Trim the width of the box
sh Cut the height of the box
dx The x coordinate to draw to the top left corner of the canvas
dy The y coordinate to draw to the top left corner of the canvas
dw The width to draw to the canvas
dh To draw to the height of the canvas

After understanding the meaning of the above parameters, we can start to draw the image!

  • aspectFIt

    As you can see below, to maintain the aspect ratio of the black image in the gray canvas size, dh is equal to the image size specified in the canvas (canvasHeight), dw is equal to the imageWidth/imageHeight, dy is obviously 0, Dx is canvasWidth minus dw over 2.

Code implementation:

const aspectFit = (imageWidth, imageHeight, canvasWidth, canvasHeight) = > {
  const imageRate = imageWidth / imageHeight
  const canvasRate = canvasWidth / canvasHeight
  let [dx, dy, dw, dh] = []
  if (imageRate >= canvasRate) {
    dw = canvasWidth
    dh = canvasWidth / imageRate
  } else {
    dh = canvasHeight
    dw = canvasHeight * imageRate
  }
  dx = (canvasWidth - dw) / 2
  dy = (canvasHeight - dh) / 2
  return [dx, dy, dw, dh]
}
Copy the code

  • aspectFill

    Because canvas.drawImage can be cut to a specified size and drawn on the canvas, it can be cut off the excess part of the long edge according to the size specified in the canvas under the condition that the aspect ratio of the image remains unchanged. Sh is equal to the true imageHeight (imageHeight), sw is equal to sh * the aspect ratio of the image display size specified in the canvas (canvasWdith/canvasHeight), sy is obviously 0, and sx is equal to (imagewidth-sw) / 2, as shown below.

Code implementation:

const aspectFill = (imageWidth, imageHeight, canvasWidth, canvasHeight) = > {
  const imageRate = imageWidth / imageHeight
  const canvasRate = canvasWidth / canvasHeight
  let [sx, sy, sw, sh] = []
  if (imageRate >= canvasRate) {
    sw = imageHeight * canvasRate
    sh = imageHeight
    sx = (imageWidth - sw) / 2
    sy = 0
  } else {
    sh = imageWidth / canvasRate
    sw = imageWidth
    sx = 0
    sy = (imageHeight - sh) / 2
  }
  return [sx, sy, sw, sh]
}
Copy the code