Because the pixel size of the image uploaded by the portrait segmentation API is limited, the clarity of the photos taken will be worn out if they are made into ID photos.
If you want 100% quality, turn left = "photo studio, no delivery
Article directory
Project scenario:
Recently, I found a fun little program, which is ID photo production. If you don’t know what it is, you can search for “ID photo” on WeChat. There will be a lot of such small programs. If you experience it yourself, then in the development of the small program cloud How can this be achieved?
Show results:
Functional Analysis:
First of all, let's analyze the general function of this project. First, we need a picture, then separate the character of this picture from the background, then put the separated character into a container, and then make an option button to change the background color of the container , and finally merge them and save them as a new picture.
Implementation:
1. First of all, in order to capture pictures conveniently, I used the SimpleCrop screenshot plug-in, but during the development process, I found that sometimes the pictures could not be loaded and the server error of path 500 was reported after the emulator of the development tool was used to select pictures and enter the editing page. Restart the development tool and it will be fine. This problem has not been found in the real device. If you don’t like it, you can remove it and use the official one.
2. Then, because the captured pictures cannot be directly exchanged for https links, we first need to upload the screenshots to the cloud server in exchange for https links, and then we need to use Tencent Cloud's artificial intelligence API called SegmentPortraitPic (portrait segmentation), which can The characters in the picture are cut out, and then we save the cutout to the cloud server.
3. Then you need to use the canvas component as the container, dynamically set a background color and fill the picture into the canvas when rendering.
4. Then when you click Save, use the wx.canvasToTempFilePath interface to convert the canvas into an image and save it to the cloud server. There is a pitfall here, that is, when the official solution uses canvasId to obtain the element of the component, no matter how it is defined in the component It doesn't work, and finally changed the canvas object to succeed.
5. Finally, in order not to occupy the server memory, when the applet is hidden or uninstalled, I cleared the folders where the cloud server stores screenshots, cutouts, and ID photos, and you can choose by yourself.
6. Last but not least, let me talk about some details, because the ID photo has many sizes, so I dynamically intercepted the width and height of the picture, and for the canvas to display beautifully, I fixed the height of the canvas, and the width is dynamically converted Yes, you can add a custom width and height option in the later stage, so I won’t complicate the project here; the image used for the portrait segmentation API and when rendering the canvas to the page must be an https link, and fileID is not acceptable. I have been stuck here for a long time, so it is an indispensable step to exchange the fileID for the https link after uploading to the cloud server.
Project use:
I will not stick out the code, it is a bit too much, if you need it, you can download CSDN if you have points, if you don’t have it, just download Baidu Cloud.
CSDN=” Portal (updated to 3 times to capture pictures)
Gitee=” Portal (3 times to capture pictures)
Baidu Netdisk=”Extraction code: fx4y=” Portal
▲Before opening the portrait segmentation of Tencent Cloud, please read the description of the resource package below. To put it simply, it will send 1,000 free times per month after opening, and then you will be charged, but it is enough for us .
Instructions for use:
Prepaid resource packs support a variety of specifications, and are valid for one year. If the resource pack is not used up within one year, it will expire and become invalid; prepaid resource packs do not support refunds and freeze the remaining times after purchase.
You can enjoy a certain amount of free calls (1,000 times/month) for free every month. This free amount will be automatically issued on the 1st of each month in the form of a prepaid resource package, and it is only valid in the current month.
The deduction sequence of the calling volume is "free resource pack -> paid resource pack -> postpaid". If you have not purchased a paid resource pack, it will be automatically transferred to postpaid when the free resource pack is used up; if you have purchased a paid resource pack, it will be automatically converted to a paid resource pack deduction when the free resource pack is used up, When the paid resource package is exhausted, it will be converted to a post-paid method for monthly settlement. If you purchase multiple paid resource packs at the same time, the deduction will be made in the order of purchase time, and the one bought first will be deducted first.
①. Before using the project, you need to go to Tencent Cloud to register an account. It seems that you need a real-name system. After that, we enter the homepage , 点击产品=》人工智能=》人体识别=》人体分析,
After entering the human body analysis, there is a free experience. You can check it out yourself. Let’s click on it, 管理控制台then
select the portrait segmentation 二分类人像分割, and check Enable.
After activation, we click on the document link, find the test button in the interface description in the pop-up window, and click it
. Then enter SegmentPortraitPicthe interface debugging area, click on the online test, choose a region at random, then go to Baidu to copy a picture link and paste it into the URL input box, click Send Request, after success, it will return a picture called Base64 encoding format, ResultImagethis It means that our interface has been opened. If an error is returned, you can click the view document navigation button to find the error code and see what the problem is. (In addition, it should be noted that the resolution of the picture must be smaller than that 2000*2000, and the size of the picture after base64 encoding cannot exceed 5M)
②. Next to the above, after downloading the project, import the project with the AppID of the small program developed by yourself through the cloud.
After opening the project, open app.jsthe file and replace the environment ID with your own.
Then we open ClearingRedundantFoldersand SegmentPortraitPiccloud functions separately index.js, and replace the environment ID with yours. My own,
then go back to Tencent Cloud first 点击头像=》访问管理=》访问秘钥=》API密钥管理, and create a new one if there is no key, I copy the and secretIdcloud functions to replace and save, and thensecretKeyClearingRedundantFoldersSegmentPortraitPic
Be sure to deploy cloud functions to the cloud
Finally, do not use real machine debugging when debugging, because the SimpleCrop image selection plug-in is used, which does not support real machine debugging, just use preview debugging
Finally, be sure to read the error related article, because it takes a long time to call the portrait separation AP to process the picture, which may cause the cloud function call to time out, and occasionally there will be a situation where it keeps turning in circles after selecting a picture
Error related:
Recently, many friends have reported that after selecting pictures, they will keep turning in circles, and this time I also encountered it in the use of the real machine. Sometimes I can do it, and sometimes I can’t. Fortunately, this time on the WeChat public platform=”Development=”Development Management=” Operation and Maintenance Center = "I caught this error message in the error log: cloud.callFunction:fail Error: errCode: -504003 | errMsg: Invoking task timed out after 3 seconds
it means that the cloud function call timed out. The default timeout period of the cloud function is 3 seconds. Because this problem is rarely encountered in WeChat development tools, I set the cloud function timeout to It became 1 second, and this problem did occur later, so we SegmentPortraitPicshould increase the duration of the cloud function for this portrait segmentation, and this problem should not occur. For details, you can see the following GIF:
Okay, let’s talk about the key points. Similarly, if there are other errors reported, you can first use the development tool console, the error log of the WeChat public, and the development and debugging of the mobile phone to catch the exception, and check online to see if it can be resolved. Don’t come up. I can't do it, I can't do it. Guys, I am not omnipotent (ಥ﹏ಥ)
 |
 |
Picture Quality:
If you want to adjust the clarity of the ID photo, you must improve the image quality after the portrait segmentation. If you want to improve the quality of the portrait segmentation image, you must pass in a picture with a pixel close to 2000px ( ), so in the final analysis it is to capture the 2000px是人像分割Api支持的最大像素image It is enough to zoom in on the pixels. Because our ID photo has a size, we can’t just zoom in to capture the picture. At present, our maximum pixel is 579px of two inches. Also, it is more reasonable to zoom in by 3 times to capture the picture, and zoom in by 4 times 579x3=1737. If it is more than 2000, after zooming in by 3 times, it is equivalent to stuffing a picture that is 3 times larger than the canvas into the canvas, and it will naturally be clearer than when it is 1:1. After the adjustment, the outline and texture of the red hair became clearer and more domineering. Please see the following GIF for details on how to modify it:
One detail is that when we open the picture directory of the cloud console, closing or returning to the applet will not clear the folder, because the directory is in use. In addition, I may change the code for subsequent downloads to 3 times by default.
I found out that wx.chooseImage() is about to be abandoned again, replaced by wx.chooseMedia() , hey, Tencent’s api is too untestable, a lot of problems in the community have not been solved, and the frequency of api releases Arrived very fast. If you want to use it, index.jsjust change the chooseCropImage method of the file to the following code, but I don’t know if it works well, so I won’t write it into the demo
// 选取裁剪图片
chooseCropImage: function () {
let self = this;
wx.chooseMedia({
mediaType: ["image"],
success(res) {
// console.log(res)
self.setData({
visible: true,
src: res.tempFiles[0].tempFilePath
})
}
});
},
After zooming in by 3 times, the size of the captured image can reach 1 or 2M, so the processing time of the portrait segmentation API will also be longer, so be sure to adjust the call duration of SegmentPortraitPicthe cloud function for portrait segmentation to be longer
over~
Finally, if you want to study cloud functions, you can click here! ! Portal