原創(chuàng)作品，轉(zhuǎn)載請(qǐng)注明出處By dknt From bbs.blueidea.com
聲明：
1.這篇文章教你在web頁(yè)面上實(shí)現(xiàn)條形碼效果，體現(xiàn)的是利用網(wǎng)頁(yè)制作技術(shù)綜合解決問(wèn)題的思路。旨在使對(duì)HTML, JavaScript，PhotoShop具有入門(mén)級(jí)水平的人鞏固入門(mén)級(jí)水平。
2.若有問(wèn)題不能及時(shí)回復(fù)，麻煩請(qǐng)擔(dān)待，不勝感激。
3.高手免進(jìn)。

制作條形碼總共分幾步？
第一步，把冰箱門(mén)兒打開(kāi)——使用PhotoShop繪制小圖片

我們需要制作出一個(gè)含有16個(gè)元素的條形碼圖片。

首先打開(kāi)Photoshop，本篇教程中使用的是CS 簡(jiǎn)體中文 版本，僅就本教程所涉及的方面來(lái)看，操作都大同小異，只要認(rèn)真閱讀，應(yīng)該不會(huì)遇到問(wèn)題。

• 打開(kāi)以后首先按Ctrl + N，建一個(gè) 8像素 X 8像素的圖片，背景選擇透明，如圖所示：
  
  
• 為了看清楚，可以把圖片縮放到最大 1600%。
  
• 按一下D，再按一下X，確保前景色為白色背景色為黑色。
  
• 使用Ctrl+Delele，填充背景色，黑色。
  
• 使用鉛筆筆工具，參數(shù)做如下設(shè)置
  
  
• 刻畫(huà)線(xiàn)條，隔一列畫(huà)一個(gè)。畫(huà)成下面這種效果：
  
  
• 將圖層1拖動(dòng)到下面的新建按鈕上復(fù)制一下
  
  
• 選擇 圖層1 副本,將左邊第一道白色用鉛筆工具涂成黑色（可以按 X 將前景色變成黑色）。如下圖所示：
  
  
• 選擇 圖層1 ，按Ctrl+A，再按 Ctrl + C，然后選擇菜單命令圖像=畫(huà)布大小， 將寬度調(diào)整為16個(gè)像素，點(diǎn)中 定位 的最左邊中間的小塊，如下圖所示：
  
  
• 選擇 圖層1 副本。按住Ctrl鍵，左鍵單擊圖層面板上的 圖層1 副本 條目以選擇 圖層1 副本 的選區(qū)。按Ctrl + Shift + I 反選（這一系列也可以用魔術(shù)棒操作，選擇透明部分就可以了）。按Ctrl + V 粘貼成 圖層2。
  
• 關(guān)閉 圖層1 和 圖層1 副本 的可見(jiàn)性（左鍵點(diǎn)擊小眼睛圖標(biāo)），選擇圖層2，將左邊第二道白色用鉛筆工具涂成黑色。如下圖所示：
  
  
• 打開(kāi) 圖層1副本 的可見(jiàn)性，確保選擇了圖層2，按Ctrl + E 向下合并。
  
• 打開(kāi) 圖層1 的可見(jiàn)性，按住Ctrl鍵，左鍵單擊圖層面板上的 圖層1 條目以選擇 圖層1 的選區(qū)。復(fù)制并擴(kuò)大畫(huà)布，按前面所述的方法繼續(xù)繪制。在寬度為24,32的時(shí)候再做兩次，分別把 圖層1 模式(pattern)的第三和第四條白色涂成黑色。最后的結(jié)果如下圖所示：
  
  
• 接下來(lái)還需要拓寬，方法是一樣的，只不過(guò)這次的模式變換的方案是把相鄰兩個(gè)白色之間的黑色涂成白色。比如第五次拓展，其模式是這個(gè)樣子：
  
  
• 再做幾次后，等寬度為 64 時(shí)，畫(huà)布看起來(lái)應(yīng)該是這個(gè)樣子的：
  
  
• 接下來(lái)仍然需要拓寬，思想是刪掉相鄰兩個(gè)白色條(注意，可以認(rèn)為第4個(gè)白條和第一個(gè)白條是相鄰的)，于是再做4次的效果是這樣的：
  
  
• 還差32個(gè)像素就完成了，還需再拓寬，這次是填充兩個(gè)相鄰黑色條為白色條，最后效果如下：
  
  
• 圖層1 可以不要了，刪掉即可。
  
• 接下來(lái)我們要去掉黑色的部分，使其透明。使用魔棒工具，將選項(xiàng)做如下設(shè)置：
  
  選擇以后，按delete鍵刪除，則整個(gè)畫(huà)布變成如下形式：
  
  似乎亂七八糟，是PS對(duì)透明背景表達(dá)的問(wèn)題，只要保證步驟對(duì)了，做成這個(gè)效果就行了。
  
• 大功告成選擇文件 -- 另存為，類(lèi)型選擇為 gif, 可以起名叫 barcode.gif，在下下面的對(duì)話(huà)框中，透明這一項(xiàng)一定要選中。 找個(gè)合適的地方放好。
  
  
• 于是冰箱門(mén)打開(kāi)了，如果你做出的不是這個(gè)樣子，用我這個(gè)做好的就行了，免得大象裝不進(jìn)去。

第二步，把大象裝進(jìn)去——代碼分析
我們的目標(biāo)是把一個(gè)字符串轉(zhuǎn)化為一個(gè)條形碼顯示在頁(yè)面上。那么一個(gè)字符串如何對(duì)應(yīng)出一個(gè)條形碼呢？上面做個(gè)128X8的圖片到底是要扯什么蛋？

我們可以考慮數(shù)據(jù)在存儲(chǔ)器中的最基本儲(chǔ)存單位——字節(jié)(byte) 一個(gè)字節(jié)是八位(bit)。一個(gè)8位二進(jìn)制數(shù)可以通過(guò)一個(gè)2位的十六進(jìn)制數(shù)表示，表示為 00 - FF。剛才提到了一個(gè)16，注意到了嗎？

如何把一個(gè)字符串轉(zhuǎn)換成字節(jié)表示呢？似乎不能直接表示，但是J(ava)script 中的字符串有一個(gè)charCodeAt()方法。我們知道單字節(jié)若表示整數(shù)，其范圍是 0 -255，雙字節(jié)若表

示正整數(shù)，范圍是 0 - 65535。charCodeAt()方法返回的是一個(gè)字符的Unicode表示，這種Unicode方案中，中文是兩個(gè)字節(jié)的，英文是一個(gè)字節(jié)的。所以對(duì)于一個(gè)英文字符它總是返回0 - 255 之間的正整數(shù)，對(duì)于一個(gè)中文字符，它總是返回 255 - 65535 之間的正整數(shù)（非精確范圍）。

再講一下位運(yùn)算的知識(shí)吧，節(jié)選自微軟的Jscript腳本參考手冊(cè)：

• 對(duì)于與運(yùn)算。 &運(yùn)算符查看兩個(gè)表達(dá)式的二進(jìn)制表示法的值，并執(zhí)行按位“與”操作。該操作的結(jié)果如下所示：
  
  0101   (expression1)
  1100   (expression2)
  ----
  0100   (result)
  任何時(shí)候，只要兩個(gè)表達(dá)式的某位都為 1，則結(jié)果的該位為 1。否則，結(jié)果的該位為 0。
  
• 對(duì)于移位運(yùn)算，比如右移運(yùn)算。expression1 >> expression2 中，>> 運(yùn)算符 把 expression1 的所有位向右移 expression2 指定的位數(shù)。expression1 的符號(hào)位被用來(lái)填充右移后左邊空出來(lái)的位。向右移出的位被丟棄。例如，下面的代碼被求值后，temp 的值是 -4：-14 （即二進(jìn)制的 11110010）右移兩位等于 -4 （即二進(jìn)制的 11111100）。
  

var temp
temp = -14 >> 2
注：32位整數(shù)類(lèi)型的數(shù)據(jù)有符號(hào)位的問(wèn)題，對(duì)于負(fù)數(shù)，填充位為1，正數(shù)為0。我們通過(guò)charCodeAt()得到的數(shù)都是正數(shù)，所以不用管這個(gè)問(wèn)題。
對(duì)于一個(gè)8位二進(jìn)制數(shù)，與二進(jìn)制 11110000 相與，再右移4位，則可以得到它的最左四位。
直接與 1111 相與，則可以得到他的右邊四位。
準(zhǔn)備知識(shí)了解這么多夠了，下面讓我開(kāi)始實(shí)踐編碼。
說(shuō)，要有一個(gè)字符串，于是就有了個(gè)字符串。
var strTest = "dknt沒(méi)有任何含義";
我們就是要把這個(gè)字符串轉(zhuǎn)化為一個(gè)條形碼。
我們要獲得它的二進(jìn)制表示，那我們就建一個(gè)函數(shù)來(lái)獲得它的二進(jìn)制表示。比如 getBinary();
如 
    提示：您可以先修改部分代碼再運(yùn)行
為了獲得二進(jìn)制表示，我們要一個(gè)字符一個(gè)字符的進(jìn)行，不能著急，首先要獲得每個(gè)字符對(duì)應(yīng)的Unicode編碼。

大于 255 的顯然是占用兩個(gè)字節(jié)的字符。要想辦法分成單一字節(jié)的兩個(gè)數(shù)據(jù)，以使程序流易于自動(dòng)化一些。可以使用雙字節(jié)數(shù)值與 二進(jìn)制 1111111100000000 相與再右移8位來(lái)獲得第一個(gè)字節(jié)。直接與11111111相與就可以得到第二個(gè)字節(jié)的數(shù)據(jù)。使用十六進(jìn)制數(shù)可能更方便一點(diǎn)。1111111100000000 的十六進(jìn)制表示為 FF00。11111111顯然就是 FF了。
J(ava)script中，用0x前綴表示十六進(jìn)制數(shù)。我們可以實(shí)踐一下下面的代碼。 
 
   可以看到現(xiàn)在每個(gè)數(shù)都是小于255的了。
注意，(iDecimalUnicode & 0xFF00) >> 8 中，>> 的優(yōu)先級(jí)比 & 高，所以按照我們的目的，(iDecimalUnicode & 0xFF00) 一定要有括號(hào)。 
我們希望能有個(gè)統(tǒng)一的處理邏輯，把每個(gè)字節(jié)分成兩部分，每個(gè)部分用十六進(jìn)制的1位就可以表示，換句話(huà)說(shuō)，就是每部分都是一個(gè)不超過(guò)16的十進(jìn)制數(shù)。類(lèi)似Ruby中的代碼段數(shù)據(jù)類(lèi)型，在J(ava)script中，也可以用匿名函數(shù)來(lái)實(shí)現(xiàn)類(lèi)似的功能。我們可以建一個(gè)名為tmpOP變量來(lái)承接這個(gè)匿名函數(shù)，然后利用它來(lái)簡(jiǎn)化程序邏輯。此外，我們應(yīng)該有個(gè)東西來(lái)儲(chǔ)存分解出來(lái)的結(jié)果。那就用個(gè)result數(shù)組來(lái)裝吧。另外按照語(yǔ)義，我們這個(gè)函數(shù)做的已經(jīng)不僅僅是轉(zhuǎn)化二進(jìn)制了，而是轉(zhuǎn)化成意義上的十六進(jìn)制位了。我們應(yīng)該是恨敏捷的，所以把函數(shù)名改成getHexes吧。

很高興看到現(xiàn)在就彈出一個(gè)alert吧，剛才那么多alert是很鬧心。我很抱歉。這次因?yàn)槲覀兪褂昧薬lert一個(gè)數(shù)組，感覺(jué)整齊一點(diǎn)。

現(xiàn)在發(fā)現(xiàn)數(shù)組的每一個(gè)元素都是小于16了吧，很好，大象快裝進(jìn)去了。

有一個(gè)問(wèn)題，我們不能把字符串的每個(gè)字符都轉(zhuǎn)化成條形碼，若是一個(gè)1萬(wàn)多字的文章怎么辦，那不扯呢嗎。所以我們要限制一下處理的字符數(shù)。以條形碼的視點(diǎn)來(lái)看，似乎寬度應(yīng)該是固定的，也就是說(shuō)我們用以對(duì)應(yīng)的 aResult 數(shù)組的長(zhǎng)度應(yīng)該是固定的。那也好辦，在我們的 tmpOP 里控制一下就行了。我們可以假設(shè)我們只需要8個(gè)十六進(jìn)制位來(lái)生成條形碼?？梢栽趃etHexes里加一個(gè) iMaxLength 參數(shù)來(lái)控制。
如下：

現(xiàn)在確實(shí)只有8個(gè)小于16的數(shù)了。

在 tmpOP 中，發(fā)現(xiàn) aResult 數(shù)組的長(zhǎng)度超過(guò)最大值，就返回一個(gè)0，外面發(fā)現(xiàn)這個(gè)0以后，就直接退出循環(huán)，因?yàn)闆](méi)有必要再繼續(xù)往下取字符了。

有些地方略顯不妥，本著精益求精的精神，我們要把我們的程序效率提高提高。首先，我們知道了位相與的目的，就可以寫(xiě)一些更直接處理的代碼，因?yàn)槲覀儼烟幚黼p字節(jié)時(shí)，為了分成兩個(gè)單字節(jié)，實(shí)際上多與運(yùn)算了一次，和后面的分解雙十六進(jìn)制位有重復(fù)的位相與。說(shuō)俗了就是多干了一次沒(méi)用的事。不如一次就分解出4個(gè)十六進(jìn)制位。

此外，我們總是向數(shù)組詢(xún)問(wèn)length屬性來(lái)獲知數(shù)組長(zhǎng)度，要知道數(shù)組做這件事是很累的，反正我們也有條件自己心理有數(shù)，為什么還要總問(wèn)它呢。

基于這兩點(diǎn)，我們把程序改動(dòng)如下：

看到了效果跟上一個(gè)是一樣的，說(shuō)明我們沒(méi)改錯(cuò)。其中，aPos數(shù)組就可以?xún)?chǔ)存掩碼，數(shù)組的索引 X 4 就是需要右移的位數(shù)。tmpOP( iDecimalUnicode , i) 就表示取 iDecimalUnicode 從右邊數(shù)第i個(gè)十六進(jìn)制位（第0個(gè)就是最右邊的1個(gè)十六進(jìn)制位）。

大象是勉勉強(qiáng)強(qiáng)塞進(jìn)去了，下面我們就把活做的利索點(diǎn)，把冰箱門(mén)兒帶上。要不條形碼還沒(méi)露面，我們?cè)趺词請(qǐng)觯?

最新評(píng)論