Give a series of pictures of commercial shoes of the same size, and judge the orientation of their toe. For example:
First, let's show the final effect:
Ideas:
In fact, it's very easy to find the law.
- First, we need to unify the size and width of 1000. Otherwise, it's difficult to unify the pixel position judgment. Here, we can use the batch of image tools to turn it around (don't ask why eight images need to turn, we simulate thousands of images).
- Next, we need to start looking for rules. Before we talk about it, let's take a picture:
We first divided into two areas, area A and area B. regardless of the logo, there is A rule for shoes: low on the right and high on the left. This is where we start.
Initialize a project and install our dependency: NPM I get pixels -- save. This package is used to read the pixel information of the graph. Let's start with the initial code:
var getPixels = require("get-pixels"); var fs = require("fs"); var path = require("path"); getPixels(img, function (err, pixels) { if (err) { return false }else{ console.log(pixels) }I am a senior front-end veteran who started in 2008. If you have any questions or exchange experience, you can enter my button down skirt 519293536. I will try my best to help you })
We got the pixel information. I used a 50-50 Pixel image as a demonstration, the image is too large for us to analyze. It's found that it has so many pixel information:
In shap, there is the information about the width and height of our pictures. In data, there is the detailed information about the pixels, but it's not clear enough. 50-50 pictures split out 10000 pixel information. We need to convert them into pixels, four rgba s, and 50-50 pixel points, similar to this structure: [[rgb],[rgb],[rgb],[rgb], [RGB]] so this is what we're going to do next:
var arr = []; //Collection of pixels, three rgb groups var arrtemp = []; //The temporary array is used to store the three temporary rgb s pixels.data.forEach((item, index) => { if (index % 4 === 0) { arr.push(arrtemp) arrtemp = [] //Reset pixel storage } else { arrtemp.push(item) } }); Copy code
Finally, the arr we get is what we need! Here, the naming of variables is more casual. Name according to your own business needs. Good naming maintainability is very important.
Next we need to determine where the first pixel appears. Take a look at the color through ps.
- The color of the background
- The color of the object
Obviously, the smaller the rgb value, the more likely the object we need to appear, so we can make a judgment here. The threshold value I set here is less than 200. I think it's an object. You can also come according to your own needs. My code is only rough. You can optimize it according to your own ability:
var width = pixels.shape[0]; //Collect picture width var arr = []; //Collection of pixels, three rgb groups var arrtemp = []; //The temporary array is used to store the three temporary rgb s var flag = true; //Whether to judge the position of the first target pixel var okIndex = 0; //Where the target pixel appears var indexindex = 0; //Counting and accumulation of target pixels in recording cycle pixels.data.forEach((item, index) => { if (index % 4 === 0) { arr.push(arrtemp) indexindex++; if (flag) { if ((((arrtemp.filter((item2) => item2 < 200)).length) > 1)) { //If the pixel value is greater than 200, it is the target pixel okIndex = indexindex flag = !flag } } arrtemp = [] //Reset pixel storage } else { arrtemp.push(item) } }); arr.shift() console.log('The highest pixel appears in:', (okIndex / width).toFixed(2).toString().split('.')[1], '%Position') Copy code
After doing this, almost all the shoes have been judged
if ((okIndex / width).toFixed(2).toString().split('.')[1] < 50) { //Just over half the canvas is considered to be console.log('Toe right') res('Toe right') } else { console.log('Toe left') res('Toe left') } Copy code
But there will be a problem. You can see that some pictures have logo s in the upper left corner. How to solve this problem? It's also simple. Before we set the number of lines and pixels of a picture, we don't judge it first. We don't judge it until the next few lines.
const noCheckLine = 160; //Lines that need to be ignored, such as Adidas logo on the top to determine the pixel position if ((((arrtemp.filter((item2) => item2 < 200)).length) > 1) && indexindex / width > noCheckLine) //If the pixel value is greater than 200, it is the target pixel Copy code
According to this judgment, we can start to find the pixel point we want from the specified number of lines.
At this point, if we need to batch, we can find that this thing is actually a callback function, which is not good for batch operation. We encapsulate it as promise, plus async function, perfect~
var getPixels = require("get-pixels"); var fs = require("fs"); var path = require("path"); (async () => { ...... })() function getInformation(img) { return new Promise((res, rej) => { getPixels(img, function (err, pixels) { if (err) { rej('Failed to pull the picture!') } ...... if ((okIndex / width).toFixed(2).toString().split('.')[1] < 50) { //Just over half the canvas is considered to be res('Toe right') } else { res('Toe left') } }) }) } Copy code
Let's show the final effect:
Questions left:
How should slippers, sandals and side shoes be judged? The approach here doesn't apply to these, but it doesn't mean there's no way.
For slippers, we can judge in reverse, so how to judge whether they are slippers? Pixel information density is OK, specify a threshold value. Sandals can also be based on specific product samples to find out the law.
- Q: this kind of accuracy rate is less than 100%, which is still unreliable!
- A: generally 95% of the problem can be solved. The remaining 5% is to adjust the parameters. If you need a better solution, you can try artificial intelligence, but I think, then a large number of materials need to be trained, maybe after the training, the naked eye has seen... And the training of the model also needs to consider many sample features. Remember me: I am a senior front-end veteran who started in 2008. If you have any questions or exchange experience, you can enter my button skirt 519293536. I will try my best to help you
The text and pictures of this article come from the Internet and my own ideas. They are only for learning and communication. They have no commercial use. The copyright belongs to the original author. If you have any questions, please contact us in time for handling