跨境電商商品尺碼圖的在線生成研究

葉文全

（閩北職業技術學院信息系，福建南平353000）

跨境電商商品尺碼圖的構成要素主要包括商品尺碼、尺碼參數、尺碼單位、提示文字。與國內的電商商品尺碼圖相比，其不同點主要體現在語言不同、尺碼單位不同。以亞馬遜跨境電商平臺為例，語言涉及英語、日語、德語等，尺碼單位涉及厘米、英寸等?？缇畴娚躺唐烦叽a圖的制作涉及尺碼參數的翻譯、尺碼單位的換算，使用傳統的制圖軟件進行制作，難度大、效率低。因此，如何高效、便捷地實現跨境電商商品尺碼圖的制作，具有較高的經濟價值和研究意義。通過對商品尺碼圖及Web圖像處理技術進行研究，提出一種基于Web技術的跨境電商商品尺碼圖的在線生成解決方案，該方案具備尺碼參數語言自動匹配、尺碼單位自動換算和尺碼圖自動生成與存儲的功能，實現跨境電商商品尺碼圖系統化管理，在降低操作復雜度的同時大大提高工作效率。

1 商品尺碼圖的在線生成方案設計

為了提高跨境電商商品在線尺碼圖使用的便捷性，本方案基于Web技術進行實現。數據庫使用微軟公司的SQL Server（2008或更高的版本）。為了降低服務器負載，前端使用layui框架實現界面呈現，商品尺碼圖的制作和生成由前端負責，使用HTML5的Canvas對象實現商品尺碼表到商品尺碼圖的繪制，并使用axios異步技術實現商品尺碼圖的上傳。后端使用asp.net技術，負責圖片的優化與存儲，并以JSON格式將操作結果、圖片存儲路徑返回至前端。因為跨境電商不同區域站點使用的語言不同[1]，不同分類的尺碼參數不同，所以數據庫需要創建站點表、分類表、尺碼參數表、商品表，尺碼參數表如表1所示。

表1 尺碼參數表

在制作商品尺碼圖時，程序會根據商品的所屬站點（站點確定語言）、分類（分類確定尺碼參數）加載相應的尺碼參數信息。由于在尺碼參數表中已將尺碼參數對應的外文翻譯存儲在frName字段中，因此用戶操作時只需選擇中文尺碼參數（cnName），程序便可讀取對應的外文尺碼參數（frName），從而實現了尺碼參數語言自動匹配，解決了用戶翻譯尺碼參數的困擾。生成商品尺碼圖的流程如圖1所示。

圖1 商品尺碼圖在線生成流程圖

獲取到商品尺碼圖后，可以單個更新商品尺碼圖，也可以使用商品導入模板批量更新商品尺碼圖。使用模板批量更新商品尺碼圖時，需要指定商品ASIN碼（用于關聯具體的商品）、商品尺碼圖地址，同時將“update delete”字段的值設為“Partial Update”，表示本次導入為部分數據更新操作，其他數據可留白。

2 商品尺碼圖的在線生成方案實現

2.1 商品尺碼圖生成頁面實現

layui是一款采用自身模塊規范編寫的前端UI框架，遵循HTML/CSS/JS的書寫組織形式[2]。前端頁面使用layui框架實現，商品尺碼圖生成頁界面如下頁圖2所示。

從服務器端獲取到的尺碼參數信息保存在對象數組params中，params包括屬性cnName（中文尺碼參數名）和frName（外文尺碼參數名），尺碼參數以復選框形式呈現的核心代碼如下。

params.forEach(item=＞{

let chk=document.createElement("input")；

chk.setAttribute("type","checkbox")；

chk.name="params"；

chk.value=item.frName；

chk.title=item.cnName；

paramWraper.appendChild(chk)；

})；

圖2 商品尺碼圖生成頁界面

因為尺碼參數復選框是在接收到異步數據后動態生成的，layui表單模塊的自動化渲染對其失效，所以需要調用layui的form.render（“元素類型”、“容器lay-filter值”），完成動態創建元素的渲染，代碼如下：

form.render("checkbox","form1")；//只渲染lay-filter值為form1表單內部的checkbox。

選擇尺碼參數和外觀風格后單擊確定按鈕，動態生成商品尺碼表，該過程使用文檔片段節點（DocumentFragment）實現，減少DOM回流（reflow）次數，從而提高網頁性能[3-4]。生成的商品尺碼表如圖3所示。

圖3 商品尺碼表示例

商品尺碼表首行顯示中文的尺碼參數，其作用是幫助用戶理解尺碼參數的意思，保存圖片時需要將首行隱藏。單擊表格厘米所在列的單元格，顯示輸入文本框，文本框失去焦點時隱藏自身、更新數據，并自動計算對應英寸單元格的值。因此，需要為動態創建的厘米所在列單元格td、單元格內的參數值文本框txt動態添加事件。使用addEventListener實現事件動態添加，可通過事件參數e的target屬性獲取事件觸發元素。在td的單擊事件中，e.target不一定是td本身，也可能是內部的文本框，使用console.log方法進行測試，其輸出結果如圖4所示。因此要正確獲取td元素，需要在事件方法中使用this對象。

圖4 e.target與this測試圖

2.2 參數值文本框輸入效果優化

用戶在參數值文本框輸入數據后，需要通過點擊其他區域觸發文本框的失去焦點事件，從而實現數據的更新，效率不高、用戶體驗不好。為了提高輸入效率、改善用戶體驗，需要為參數值文本框添加回車、向上、向下、向左、向右快捷鍵。以回車快捷鍵為例，當用戶按回車鍵時，自動更新當前數據并切換至下一個單元格的文本框，按自上而下、從左到右的順序，快速實現參數值的輸入。

為了能夠實現單元格上、下、左、右的切換，在構建表格時需要為厘米列的單元格指定有規律的編號，編號格式為：td_行索引_列索引，行索引從尺碼數組sizeList中獲取，列索引從已選尺碼參數數組paramsSelect中獲取，其核心代碼如下。

使用split函數以“_”為分隔符號將當前文本框所在單元格的編號轉換為數組，則arry[1]代表行索引、arry[2]代表列索引，當需要下移時，將行索引值加1便可獲取目標單元格，當需要右移時，將列索引值加1便可獲取目標單元格。以下移一個單元格為例，獲取目標單元格的核心代碼如下。

let arry=txt.parentNode.id.split("_")；

let rowIndex=parseInt(arry[1])+1；//需要將arry[1]轉換為整型

let targetTD_Id=arry[0]+"_"+rowIndex.toString()+"_"+arry[2]；

let targetTD=document.getElementById(targetTD_Id)；

在對行索引或列索引進行增減計算時，需要使用parseInt方法將索引值轉換為整型，否則會以字符串拼接的形式返回值，導致目標單元格無法正確獲取。當獲取到的targetTD結果為undefined時，表示當前文本框所在的行是最后一行。

2.3 使用html2canvas實現商品尺碼圖的生成

HTML5新增的canvas標簽用于在網頁上繪制圖形圖像，canvas元素本身并沒有繪圖能力，需要通過javascript腳本來實現圖形圖像的繪制[5-6]。html2canvas基于DOM元素進行屏幕截圖，能夠將目標區域繪制成canvas圖片[7]。使用html2canvas繪制商品尺碼圖時，存在兩個問題：

（1）當頁面出現滾動條時，商品尺碼圖發生偏移且繪制不完整；

（2）當頁面比例縮放時，商品尺碼圖有空白區或繪制不完整。

為了解決滾動條導致商品尺碼圖出現偏移且繪制不完整的問題，需要為canvas指定x坐標和y坐標，其值分別為目標元素的offsetLeft、offsetTop。為了解決瀏覽器頁面縮放導致的商品尺碼圖有空白區或繪制不完整的問題，需要獲取頁面縮放比例的值，并將canvas的寬度和高度乘以縮放比例。Window屬性devicePixelRatio能夠返回當前顯示設備的物理像素分辨率與CSS像素分辨率的比率[8]，實現頁面縮放比例的獲取，代碼為let scale=window.devicePixelRatio。

在IE瀏覽器中，僅IE11支持window.devicePixelRatio屬性。針對IE9、IE10瀏覽器，獲取頁面縮放比例的代碼為let scale=window.outerWidth/window.innerWidth。

優化了滾動條和頁面縮放的問題后，可以使用canvas.toDataURL方法獲取商品尺碼圖的數據，其核心代碼是let chiMaTu=canvas.toDataURL("image/jpeg",1)。

canvas.toDataURL方法的第一個參數為圖片類型，第2個參數為圖片的質量（默認值為0.92）。獲取到chiMaTu的是base64格式的圖片數據，使用axios以post方式實現商品尺碼圖的異步提交。axios是一個基于promise的HTTP庫，實現了對原生XHR的封裝，符合最新的ES規范，能夠自動轉換JSON數據和防御跨站請求偽造（CSRF/XSRF）攻擊[9-10]。

2.4 商品尺碼圖的優化與存儲

服務器端獲取到異步提交的商品尺碼圖base64格式數據后，對商品尺碼圖進行優化和存儲。本方案的服務器端使用asp.net技術實現，使用一般處理程序（ashx）實現圖片的接收、優化、存儲和結果返回。一般處理程序默認不支持Session，如果使用Session驗證用戶身份，一般處理程序需要繼承System.Web.SessionState命名空間下的IRequiresSessionState接口。

由于接收到的圖片數據是base64格式，要將數據頭部的“data：image/jpeg；base64”截取，并使用From-Base64String方法轉換為字節數組進行存儲，其核心代碼如下：

string data=Request["chiMaTu"].ToString()；

string strbase64=data.Substring(data.IndexOf(',')+1)；

byte[]arr=Convert.FromBase64String(strbase64)；//轉換為字節數組

using(MemoryStream ms=new MemoryStream(arr)){

Bitmap bmp=new Bitmap(ms)；

…

本方案將商品尺碼圖優化為比例1∶1、寬度不小于1 000像素的圖片。商品尺碼圖保存操作完成后，將執行結果以JSON格式數據返回，包括code、msg兩個屬性。當code值為0時，表示操作成功，msg值為圖片的存儲路徑。當code值為非0時，表示操作失敗，msg值為失敗原因。由于一般處理程序的默認輸出ContentType為text/plain，建議將其值設為application/json，確保前端能夠正確識別返回的是JSON格式數據。

3 結束語

在跨境電商行業發展趨勢良好的大環境下，實現跨境電商運營系統化管理有著廣闊的市場應用前景。本文提出的基于Web技術的跨境電商商品尺碼圖的在線生成方案，將商品尺碼圖的制作在Web前端完成，降低了服務器端的負載，實現了尺碼參數語言自動匹配、尺碼單位自動換算、參數值輸入效果優化，且生成的商品尺碼圖規格符合電商平臺的要求。該方案已投入實際應用，具備性能好、效率高、易操作的優點，符合跨境電商運營系統化管理的需求。