instructions

I saw this picture several times in my moments a few days ago.

This picture is a heart made of nine pictures.

Feel very interesting, on the Internet to check how to do, most of the view is to use the beautiful picture xiu xiu jigsaw function to do, in the micro channel small program also have special heart jigsaw small program, I tried to try, the feeling can also be more simple, so I made a small program.

Realize the idea of small procedures

1. There are two canvas, a small canvas to show what the final look will be, and a large canvas to take screenshots, generate pictures and save them in the album. By positioning CSS, move the large canvas out of the screen and hide it from the user. If you use a small canvas to save the image, the final image will be a little blurry.

2. Canvas can be regarded as a 9 * 9 grid.

This is what happens when you use an array called heart.

Use the little squares to create a heart and render it on the canvas based on the contents of the array.

Applets function

This small program has select a single picture, select multiple pictures, add pictures, save pictures, reset, recommend, feedback, these several functions.

Select a single image

When the user clicks on the heart-shaped area, they can select a single image, call wx.chooseImage to select an image from their local album, and draw the image on the canvas, where the user clicked.

We’re binding the TouchEnd event to a small canvas, and when it’s triggered, it has a changedTouches property, which is an array of touches that are currently changing, and elements in that array have x and Y properties. That’s how far the touch point is from the top left corner of the canvas.

Var x = e.touches [0].x; [0].touches [0].touches [0].Copy the code

So once you have the distance between x and y, figure out what grid you want to draw it on.

X = math.floor (x /grid); Y = math.floor (y/grid);Copy the code

After knowing which grid to draw in, it is necessary to determine which part of the picture to draw, because all the grid is square, but the picture selected by the user is not necessarily square, if compressed into a square will be very ugly, so WHEN I draw, I choose the middle part to draw.

Get the image information from wx.getimageInfo, take the short side as the width of the square, and draw from (long side – short side) /2.

Var width = res.width; var height = res.height; Var sWidth = width > height? height : width; // sx is the upper-left x-coordinate of the rectangle selection box of the source image. Var sy = 0;if (width > height) {
	sx = (width - height) / 2;
}
if (width < height) {
	sy = (height - width) / 2;
}
Copy the code

Once you know what to draw and where to draw it, you can call canvasContext. DrawImage to draw it.

Select multiple images

ChooseImage. The tempFilePaths property holds a list of the local file paths for the images.

If the value of any of the elements in the array is 1, in the range of hearts, draw the tempFilePaths in the same order. If it’s not a square, draw only the middle part.

Added pictures

In the image file, there are several images that complement the heart, and their paths are stored in an array.

// Add a heart-shaped image.'.. /.. /images/1.jpg'.'.. /.. /images/2.jpg'.'.. /.. /images/3.jpg'.'.. /.. /images/4.jpg'.'.. /.. /images/5.jpg'.'.. /.. /images/6.jpg'.'.. /.. /images/7.jpg'.'.. /.. /images/8.jpg'.'.. /.. /images/9.jpg'.'.. /.. /images/10.jpg',]Copy the code

It then iterates through the Heart array, and if one of the elements in the array has a value of 1, it randomly draws one of the images.

Draw a picture, draw multiple pictures, supplement pictures, they all draw pictures on the canvas, in order to avoid the position of the picture already drawn will be overwritten, they draw the picture level is different.

Supplementary pictures: 1 draw multiple pictures: 2 draw one picture: 3Copy the code

High level can cover low level, low level can not cover high level, the same level, except for drawing more than one picture can not cover, the rest of the two cases, can be covered.

Simple meaning is: add pictures, after the supplement, the supplement will cover the original supplement, but the user selected pictures will not be covered. Drawing multiple images can overwrite additional images, but the images selected by the user will not be overwritten either. Draw a picture, whether there’s a picture or not, draw another picture.

Save the picture

To save an image, a large canvas is sequentially captured and saved as an image, mainly through the Wx.canvastotempFilepath API. This API can export the contents of the specified area of the current canvas to generate a specified size image, and return the file path.

There are a few details to note here

1. In order to avoid the black background of the picture saved at the end, it is best to draw a rectangle of the same size as the canvas at the beginning and fill the rectangle with color.

2. Keep the heart shape in the user’s album for the sake of saving pictures. You need to save the images in this order

Wx.canvastotempfilepath has two optional parameters, destWidth and destHeight. This parameter determines the output image width and height. If you don’t know exactly what it is, use the default value.

The unit of destWidth and destHeight is physical pixel. The canvas draws using logical pixel (physical pixel = logical pixel * density). Therefore, if only the width and height (logical pixels) in canvas are used as the length and width of the output image, the generated image width and height are actually scaled to 1 / density of canvas, so it is fuzzy.

The default is Width * screen pixel density

The pixel density of the screen is not the number of pixels per inch of the screen, but the pixelRatio of the device, which is how many physical pixels it takes to display a 1px CSS pixel. The device pixel ratio can be viewed using the API wx.getSystemInfo

wx.getSystemInfo({
  success: function(res) {
    console.log(res.pixelRatio)
  }
})
Copy the code

Here if MY understanding is wrong, also please know the partner pointed out.

All that said, the main point is that using the default values is pretty clear.

4, because want to save the 9 pictures, so I need some time, a progress bar will be needed at this time, save the pictures, display the progress bar, disable the save button, click on the button, after all, is nine images, so good or disabled at this time, each save a picture the value of the progress bar is + 12, more than 100, That means all 9 images are saved.

And the micro channel small program also happens to have the progress bar this component.

reset

The function is to walk through the Heart array, drawing hearts in one color based on the contents of the array. Then draw two lines along the x and y axes to form a nine-grid.

Recommendations and feedback

 <button open-type='share'</button> <button open-type='feedback'> FeedbackCopy the code

This two functions are used, wechat applet button component, here need to pay attention to is, when clearing the default style of button, need to remove the border of the after pseudo-element of button.

button::after{
  border: 0; 
}
Copy the code

Things that can be optimized

For example, if the selected image is not a square, draw the middle part, but the middle part is not necessarily what the user wants, and if the user has to choose which part to draw for each image, it is obviously a bit of trouble, and can be further optimized.

In addition, when supplementing pictures, the pictures may not be the user’s favorite, so this part should consider whether to add some labels. Users choose different labels to supplement pictures that conform to the label, similar to QQ music lyrics and posters.

conclusion

This time do the nine square heart jigsaw small procedures, the first version has been online.

Open source address: github.com/FEWY/jigsaw If you like this small program, you can star support.

This small program no matter in the code, or function there are many places can continue to optimize, if there is a need for a friend can directly take to change.