Original Works. For reprinted works, indicate the source By dknt From bbs.blueidea.com.
Statement:
1. This article teaches you how to implement the bar code on the web page, reflecting the idea of using the web page production technology to comprehensively solve the problem. It aims to consolidate the entry level for HTML, JavaScript, and PhotoShop users.
2. If you have any questions, please wait. Thank you very much.
3. Master is free of entry.
How many steps can I create a barcode?
Step 1: open the refrigerator door-use PhotoShop to draw small images
We need to create a bar code image containing 16 elements.
First, open Photoshop. This tutorial uses the Simplified Chinese version of CS. The operations are similar only in terms of this tutorial. If you read them carefully, you should not encounter any problems.
- After opening, press Ctrl + N to create an 8-pixel X 8-pixel image, and select transparent background ,:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/2007424113941.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500SU2-0.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- To make it clear, you can scale the image to a maximum of 1600%.
- Press D and then press X to make sure that the foreground color is black and the background color is white.
- Use Ctrl + Delele to fill in the background color and black.
- Use the pencil pen tool and set the parameters as follows:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411114706.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500U133-1.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- Depicts a line and draws a line in a column. Draw the following effect:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411115190.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500R3W-2.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- Drag Layer 1 to the new button below and copy it.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411115207.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500U644-3.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- Select a copy of Layer 1 and apply the first white color on the left to black with a pencil tool (you can press X to change the foreground color to black ). As shown in:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/2007424115432.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500R0D-4.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- Select Layer 1, press Ctrl + A, then press Ctrl + C, then select the menu command Image = canvas size, and adjust the width to 16 pixels, the leftmost middle part of the point, as shown in:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411115836.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500U0M-5.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- Select Layer 1 copy. Press Ctrl and left-click Layer 1 copy entry on the layer panel to select the selection area of Layer 1 copy. Press Ctrl + Shift + I to invert the selection (this series can also be operated with a magic wand, select the transparent part ). Press Ctrl + V to paste it into Layer 2.
- Turn off the visibility of the copies of Layer 1 and Layer 1 (click the small eye icon with the left button), select Layer 2, and apply the second white color on the left to black with a pencil tool. As shown in:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411115625.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500S923-6.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- Turn on the visibility of the copy of Layer 1, make sure that Layer 2 is selected, and press Ctrl + E to merge downward.
- Open the visibility of Layer 1, press Ctrl, and left-click Layer 1 entry on the layer panel to select the selection area of Layer 1. Copy and expand the canvas to continue painting as described above. When the width is 24 and 32, the third and fourth layers of pattern are respectively painted in black. The final result is shown in:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/2007424115465.gif ');} "alt =" Click here to open new window CTRL + Mouse wheel to zoom in/out "src =" http://www.bkjia.com/uploads/allimg/131015/15500TZ6-7.gif "width = 716 onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0 resized =" true ">
- The method is the same, but the scheme of this mode transformation is to apply the black between the adjacent two white colors to the white. For example, for the fifth expansion, the pattern is like this:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411115784.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500R464-8.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- After several times, when the width is 64, the canvas looks like this:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411116620.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500Q622-9.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- Next, we still need to broaden our thinking. The idea is to delete two adjacent white bars (note that we can think that 4th white bars and the first white bars are adjacent). So the effect of doing this four times is as follows:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411118698.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500U130-10.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- After 32 pixels, we need to expand it. This time, we fill two adjacent black bars with white bars. The final effect is as follows:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411118237.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500SE4-11.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- You can delete Layer 1.
- Next we need to remove the black part to make it transparent. Use the magic wand tool to set the options as follows:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/200742411119221.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500T552-12.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
After the selection, press delete to delete the canvas. The entire canvas is in the following format:
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/2007424119157.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500T538-13.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
It Seems messy. It is the problem that PS expresses the transparent background. You just need to ensure that the steps are correct and make this effect.
- In the following dialog box, you must select the file "Save as" and the type "gif". You can name it "barcode.gif. Find a suitable place.
Screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. style. cursor = 'hand'; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "onclick =" if (! This. resized) {return true;} else {window. open ('/upload/2007424119257.gif');} "alt =" "src =" http://www.bkjia.com/uploads/allimg/131015/15500U0R-14.gif "onload =" if (this. width> screen. width * 0.7) {this. resized = true; this. width = screen. width * 0.7; this. alt = 'click here to open new window \ nCTRL + Mouse wheel to zoom in/out';} "border = 0>
- So the refrigerator door opened. If you didn't make it like this, just use it to do it well, so that the elephants won't fit in.
Step 2: Install the elephant-code analysis
Our goal is to convert a string into a bar code and display it on the page. How can a string correspond to a bar code? What are the things you want to get from the above x 8 image?
We can consider that the most basic unit for storing data in memory is byte. one byte is eight bits ). An 8-bit binary number can be expressed as 00-FF by a two-bit hexadecimal number. I mentioned a 16. Have you noticed it?
How can I convert a string to a byte representation? It seems that it cannot be expressed directly, but the string in J (ava) script has a charCodeAt () method. We know that if a single byte represents an integer, its range is 0-255. If the double byte represents an integer
A positive integer in the range of 0-65535. The charCodeAt () method returns the Unicode representation of a character. In this Unicode scheme, the Chinese character is two bytes, and the English character is one byte. Therefore, for an English character, it always returns a positive integer between 0 and 255. For a Chinese character, it always returns a positive integer between 255 and 65535 (inexact range ).
Let's talk about bit operations. The source is Microsoft's Jscript reference manual:
- For and operations. & Operator: view the values of the two expressions in binary notation and perform the bitwise "and" operation. The result of this operation is as follows:
0101 (expression1)
1100 (expression2)
----
0100 (result)
At any time, as long as one of the two expressions is 1, the result is 1. Otherwise, the result is 0.
- For the shift operation, such as the right shift operation. In expression1> expression2,> the operator shifts all the bits of expression1 to the right of the bits specified by expression2. The symbol bit of expression1 is used to fill the blank bit on the left after the right shift. The position removed from the right is discarded. For example, after the following code is evaluated, the value of temp is-4:-14 (that is, 11110010 of binary), and the right shifts two places to-4 (that is, 11111100 of binary ).
Var temp
Temp =-14> 2
Note: 32-bit integer data has a signed bit problem. For negative numbers, the filling bit is 1, and the positive number is 0. The number we get through charCodeAt () is a positive number, so you don't need to worry about this problem.
For an 8-bit binary number, which is the same as binary 11110000, and then shifts four places to the right, the leftmost four bits are obtained.
Directly following the 1111 phase, you can get the four digits on the right.
I have learned so much about preparation. Let me start to practice coding.
That is, there must be a string, so there is a string.
Var strTest = "dknt has no meaning ";
We want to convert this string into a bar code.
To obtain its binary representation, we create a function to obtain its binary representation. For example, getBinary ();
For example
[Ctrl + A select all note: To import external Js, refresh required to execute] tip: you can modify some code before running
In order to obtain the binary representation, we need one character and one character. Don't worry. First, we need to obtain the Unicode encoding corresponding to each character.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The value greater than 255 is a string of two bytes. It is necessary to divide the data into two bytes so that the program flow is easier to automate. You can use the double byte value and the binary 1111111100000000 and then shift the value to the right to obtain the first byte. The second byte of data can be obtained directly in the phase of 11111111. It is easier to use hexadecimal numbers. The hexadecimal 1111111100000000 format is FF00. 11111111 is obviously FF.
In J (ava) script, the prefix 0x is used to represent the hexadecimal number. We can practice the following code.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
We can see that each number is smaller than 255.
Note: (iDecimalUnicode & 0xFF00)> 8,> Priority Ratio & height, so according to our purpose, (iDecimalUnicode & 0xFF00) must have parentheses.
We hope to have a unified processing logic. Each byte is divided into two parts. Each part can be expressed in hexadecimal 1 bits. In other words, that is, each part is a decimal number up to 16. Similar to the code segment data type in Ruby, similar functions can be implemented using anonymous functions in J (ava) script. We can create a variable named tmpOP to undertake this anonymous function and use it to simplify the program logic. In addition, we should have something to store the decomposed results. Use a result array. In addition, according to the semantics, what we do with this function is not just to convert binary, but to a hexadecimal bit in the sense. We should hate agility, so change the function name to getHexes.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
I'm glad to see an alert popped up now. It is very disturbing to see so many alert events just now. I'm sorry. This time, alert is used as an array, which is neat.
Now we can see that every element in the array is smaller than 16. That's good. The elephant is almost packed in.
One problem is that we cannot convert every character in a string into a bar code. What if it is an article with more than 10 thousand characters. Therefore, we need to limit the number of characters to be processed. From the bar code point of view, it seems that the width should be fixed, that is, the length of the aResult array we use should be fixed. You can control it in our tmpOP. We can assume that we only need eight hexadecimal bits to generate the barcode. You can add an iMaxLength parameter to getHexes.
As follows:
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Now there are only eight smaller than 16.
In tmpOP, if the length of the aResult array exceeds the maximum value, a 0 is returned. After the 0 is found outside, the loop is exited directly because there is no need to continue to take down the characters.
Some places are slightly inappropriate. In the spirit of perfection, we need to improve our program efficiency. First, we know the phase and purpose, so we can write some code that can be processed directly, because when we process dual bytes, In order to divide them into two single bytes, in fact, the operation is performed once, and there is a repeating phase with the next decomposition of the hexadecimal bit. To put it bluntly, it is useless to do more things. It is better to break down four hexadecimal bits at a time.
In addition, we always ask the length attribute of the array to know the length of the array. It is very tiring to know the length of the array. We also have the conditions to know why.
Based on these two points, we change the program as follows:
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
When we see that the effect is the same as that of the other one, it means we have not corrected the problem. The aPos array can store the mask, and the index X 4 of the array is the number of digits that need to be shifted to the right. TmpOP (iDecimalUnicode, I) indicates that iDecimalUnicode is taken from the I hexadecimal number of the right (0th is the 1 hexadecimal number of the rightmost ).
The elephant was filled with a powerful plug-in. Next we will take the Active Cable and bring the refrigerator door. How can we end this problem if the barcode hasn't appeared yet?
