|
|
聲明：
1.這篇文章教你在web頁面上實現條形碼效果，體現的是利用網頁制作技術綜合解決問題的思路。旨在使對HTML, JavaScript，PhotoShop具有入門級水平的人鞏固入門級水平。
2.若有問題不能及時回復，麻煩請擔待，不勝感激。
3.高手免進。
制作條形碼總共分幾步？
第一步，把冰箱門兒打開――使用PhotoShop繪制小圖片
我們需要制作出一個含有16個元素的條形碼圖片。
首先打開Photoshop，本篇教程中使用的是CS 簡體中文 版本，僅就本教程所涉及的方面來看，操作都大同小異，只要認真閱讀，應該不會遇到問題。
- 打開以后首先按Ctrl + N，建一個 8像素 X 8像素的圖片，背景選擇透明，如圖所示：
- 為了看清楚，可以把圖片縮放到最大 1600%。
- 按一下D，再按一下X，確保前景色為白色背景色為黑色。
- 使用Ctrl+Delele，填充背景色，黑色。
- 使用鉛筆筆工具，參數做如下設置
- 刻畫線條，隔一列畫一個。畫成下面這種效果：
- 將圖層1拖動到下面的新建按鈕上復制一下
- 選擇 圖層1 副本,將左邊第一道白色用鉛筆工具涂成黑色（可以按 X 將前景色變成黑色）。如下圖所示：
- 選擇 圖層1 ，按Ctrl+A，再按 Ctrl + C，然后選擇菜單命令圖像=畫布大小， 將寬度調整為16個像素，點中 定位 的最左邊中間的小塊，如下圖所示：
- 選擇 圖層1 副本。按住Ctrl鍵，左鍵單擊圖層面板上的 圖層1 副本 條目以選擇 圖層1 副本 的選區。按Ctrl + Shift + I 反選（這一系列也可以用魔術棒操作，選擇透明部分就可以了）。按Ctrl + V 粘貼成 圖層2。
- 關閉 圖層1 和 圖層1 副本 的可見性（左鍵點擊小眼睛圖標），選擇圖層2，將左邊第二道白色用鉛筆工具涂成黑色。如下圖所示：
- 打開 圖層1副本 的可見性，確保選擇了圖層2，按Ctrl + E 向下合并。
- 打開 圖層1 的可見性，按住Ctrl鍵，左鍵單擊圖層面板上的 圖層1 條目以選擇 圖層1 的選區。復制并擴大畫布，按前面所述的方法繼續繪制。在寬度為24,32的時候再做兩次，分別把 圖層1 模式(pattern)的第三和第四條白色涂成黑色。最后的結果如下圖所示：
- 接下來還需要拓寬，方法是一樣的，只不過這次的模式變換的方案是把相鄰兩個白色之間的黑色涂成白色。比如第五次拓展，其模式是這個樣子：
- 再做幾次后，等寬度為 64 時，畫布看起來應該是這個樣子的：
- 接下來仍然需要拓寬，思想是刪掉相鄰兩個白色條(注意，可以認為第4個白條和第一個白條是相鄰的)，于是再做4次的效果是這樣的：
- 還差32個像素就完成了，還需再拓寬，這次是填充兩個相鄰黑色條為白色條，最后效果如下：
- 圖層1 可以不要了，刪掉即可。
- 接下來我們要去掉黑色的部分，使其透明。使用魔棒工具，將選項做如下設置：
選擇以后，按delete鍵刪除，則整個畫布變成如下形式：
似乎亂七八糟，是PS對透明背景表達的問題，只要保證步驟對了，做成這個效果就行了。 - 大功告成選擇文件 -- 另存為，類型選擇為 gif, 可以起名叫 barcode.gif，在下下面的對話框中，透明這一項一定要選中。 找個合適的地方放好。
- 于是冰箱門打開了，如果你做出的不是這個樣子，用我這個做好的就行了，免得大象裝不進去。
第二步，把大象裝進去――代碼分析
我們的目標是把一個字符串轉化為一個條形碼顯示在頁面上。那么一個字符串如何對應出一個條形碼呢？上面做個128X8的圖片到底是要扯什么蛋？
我們可以考慮數據在存儲器中的最基本儲存單位――字節(byte) 一個字節是八位(bit)。一個8位二進制數可以通過一個2位的十六進制數表示，表示為 00 - FF。剛才提到了一個16，注意到了嗎？
如何把一個字符串轉換成字節表示呢？似乎不能直接表示，但是J(ava)script 中的字符串有一個charCodeAt()方法。我們知道單字節若表示整數，其范圍是 0 -255，雙字節若表
示正整數，范圍是 0 - 65535。charCodeAt()方法返回的是一個字符的Unicode表示，這種Unicode方案中，中文是兩個字節的，英文是一個字節的。所以對于一個英文字符它總是返回0 - 255 之間的正整數，對于一個中文字符，它總是返回 255 - 65535 之間的正整數（非精確范圍）。
再講一下位運算的知識吧，節選自微軟的Jscript腳本參考手冊：
- 對于與運算。 &運算符查看兩個表達式的二進制表示法的值，并執行按位“與”操作。該操作的結果如下所示：
0101 (expression1)
1100 (expression2)
----
0100 (result)
任何時候，只要兩個表達式的某位都為 1，則結果的該位為 1。否則，結果的該位為 0。 - 對于移位運算，比如右移運算。expression1 >> expression2 中，>> 運算符 把 expression1 的所有位向右移 expression2 指定的位數。expression1 的符號位被用來填充右移后左邊空出來的位。向右移出的位被丟棄。例如，下面的代碼被求值后，temp 的值是 -4：-14 （即二進制的 11110010）右移兩位等于 -4 （即二進制的 11111100）。
var temp
temp = -14 >> 2
注：32位整數類型的數據有符號位的問題，對于負數，填充位為1，正數為0。我們通過charCodeAt()得到的數都是正數，所以不用管這個問題。
對于一個8位二進制數，與二進制 11110000 相與，再右移4位，則可以得到它的最左四位。
直接與 1111 相與，則可以得到他的右邊四位。
準備知識了解這么多夠了，下面讓我開始實踐編碼。
說，要有一個字符串，于是就有了個字符串。
var strTest = "dknt沒有任何含義";
我們就是要把這個字符串轉化為一個條形碼。
我們要獲得它的二進制表示，那我們就建一個函數來獲得它的二進制表示。比如 getBinary();
如
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行] 提示：您可以先修改部分代碼再運行
為了獲得二進制表示，我們要一個字符一個字符的進行，不能著急，首先要獲得每個字符對應的Unicode編碼。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
大于 255 的顯然是占用兩個字節的字符。要想辦法分成單一字節的兩個數據，以使程序流易于自動化一些。可以使用雙字節數值與 二進制 1111111100000000 相與再右移8位來獲得第一個字節。直接與11111111相與就可以得到第二個字節的數據。使用十六進制數可能更方便一點。1111111100000000 的十六進制表示為 FF00。11111111顯然就是 FF了。
J(ava)script中，用0x前綴表示十六進制數。我們可以實踐一下下面的代碼。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
可以看到現在每個數都是小于255的了。
注意，(iDecimalUnicode & 0xFF00) >> 8 中，>> 的優先級比 & 高，所以按照我們的目的，(iDecimalUnicode & 0xFF00) 一定要有括號。
我們希望能有個統一的處理邏輯，把每個字節分成兩部分，每個部分用十六進制的1位就可以表示，換句話說，就是每部分都是一個不超過16的十進制數。類似Ruby中的代碼段數據類型，在J(ava)script中，也可以用匿名函數來實現類似的功能。我們可以建一個名為tmpOP變量來承接這個匿名函數，然后利用它來簡化程序邏輯。此外，我們應該有個東西來儲存分解出來的結果。那就用個result數組來裝吧。另外按照語義，我們這個函數做的已經不僅僅是轉化二進制了，而是轉化成意義上的十六進制位了。我們應該是恨敏捷的，所以把函數名改成getHexes吧。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
很高興看到現在就彈出一個alert吧，剛才那么多alert是很鬧心。我很抱歉。這次因為我們使用了alert一個數組，感覺整齊一點。
現在發現數組的每一個元素都是小于16了吧，很好，大象快裝進去了。
有一個問題，我們不能把字符串的每個字符都轉化成條形碼，若是一個1萬多字的文章怎么辦，那不扯呢嗎。所以我們要限制一下處理的字符數。以條形碼的視點來看，似乎寬度應該是固定的，也就是說我們用以對應的 aResult 數組的長度應該是固定的。那也好辦，在我們的 tmpOP 里控制一下就行了。我們可以假設我們只需要8個十六進制位來生成條形碼。可以在getHexes里加一個 iMaxLength 參數來控制。
如下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
現在確實只有8個小于16的數了。
在 tmpOP 中，發現 aResult 數組的長度超過最大值，就返回一個0，外面發現這個0以后，就直接退出循環，因為沒有必要再繼續往下取字符了。
有些地方略顯不妥，本著精益求精的精神，我們要把我們的程序效率提高提高。首先，我們知道了位相與的目的，就可以寫一些更直接處理的代碼，因為我們把處理雙字節時，為了分成兩個單字節，實際上多與運算了一次，和后面的分解雙十六進制位有重復的位相與。說俗了就是多干了一次沒用的事。不如一次就分解出4個十六進制位。
此外，我們總是向數組詢問length屬性來獲知數組長度，要知道數組做這件事是很累的，反正我們也有條件自己心理有數，為什么還要總問它呢。
基于這兩點，我們把程序改動如下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
看到了效果跟上一個是一樣的，說明我們沒改錯。其中，aPos數組就可以儲存掩碼，數組的索引 X 4 就是需要右移的位數。tmpOP( iDecimalUnicode , i) 就表示取 iDecimalUnicode 從右邊數第i個十六進制位（第0個就是最右邊的1個十六進制位）。
大象是勉勉強強塞進去了，下面我們就把活做的利索點，把冰箱門兒帶上。要不條形碼還沒露面，我們怎么收場？
JavaScript技術：手把手教你做超酷的條形碼效果第1/3頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
