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

葉文全

（閩北職業(yè)技術(shù)學(xué)院信息系，福建南平353000）

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

1 商品尺碼圖的在線生成方案設(shè)計(jì)

為了提高跨境電商商品在線尺碼圖使用的便捷性，本方案基于Web技術(shù)進(jìn)行實(shí)現(xiàn)。數(shù)據(jù)庫(kù)使用微軟公司的SQL Server（2008或更高的版本）。為了降低服務(wù)器負(fù)載，前端使用layui框架實(shí)現(xiàn)界面呈現(xiàn)，商品尺碼圖的制作和生成由前端負(fù)責(zé)，使用HTML5的Canvas對(duì)象實(shí)現(xiàn)商品尺碼表到商品尺碼圖的繪制，并使用axios異步技術(shù)實(shí)現(xiàn)商品尺碼圖的上傳。后端使用asp.net技術(shù)，負(fù)責(zé)圖片的優(yōu)化與存儲(chǔ)，并以JSON格式將操作結(jié)果、圖片存儲(chǔ)路徑返回至前端。因?yàn)榭缇畴娚滩煌瑓^(qū)域站點(diǎn)使用的語(yǔ)言不同[1]，不同分類的尺碼參數(shù)不同，所以數(shù)據(jù)庫(kù)需要?jiǎng)?chuàng)建站點(diǎn)表、分類表、尺碼參數(shù)表、商品表，尺碼參數(shù)表如表1所示。

表1 尺碼參數(shù)表

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

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

獲取到商品尺碼圖后，可以單個(gè)更新商品尺碼圖，也可以使用商品導(dǎo)入模板批量更新商品尺碼圖。使用模板批量更新商品尺碼圖時(shí)，需要指定商品ASIN碼（用于關(guān)聯(lián)具體的商品）、商品尺碼圖地址，同時(shí)將“update delete”字段的值設(shè)為“Partial Update”，表示本次導(dǎo)入為部分?jǐn)?shù)據(jù)更新操作，其他數(shù)據(jù)可留白。

2 商品尺碼圖的在線生成方案實(shí)現(xiàn)

2.1 商品尺碼圖生成頁(yè)面實(shí)現(xiàn)

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

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

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 商品尺碼圖生成頁(yè)界面

因?yàn)槌叽a參數(shù)復(fù)選框是在接收到異步數(shù)據(jù)后動(dòng)態(tài)生成的，layui表單模塊的自動(dòng)化渲染對(duì)其失效，所以需要調(diào)用layui的form.render（“元素類型”、“容器lay-filter值”），完成動(dòng)態(tài)創(chuàng)建元素的渲染，代碼如下：

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

選擇尺碼參數(shù)和外觀風(fēng)格后單擊確定按鈕，動(dòng)態(tài)生成商品尺碼表，該過(guò)程使用文檔片段節(jié)點(diǎn)（DocumentFragment）實(shí)現(xiàn)，減少DOM回流（reflow）次數(shù)，從而提高網(wǎng)頁(yè)性能[3-4]。生成的商品尺碼表如圖3所示。

圖3 商品尺碼表示例

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

圖4 e.target與this測(cè)試圖

2.2 參數(shù)值文本框輸入效果優(yōu)化

用戶在參數(shù)值文本框輸入數(shù)據(jù)后，需要通過(guò)點(diǎn)擊其他區(qū)域觸發(fā)文本框的失去焦點(diǎn)事件，從而實(shí)現(xiàn)數(shù)據(jù)的更新，效率不高、用戶體驗(yàn)不好。為了提高輸入效率、改善用戶體驗(yàn)，需要為參數(shù)值文本框添加回車、向上、向下、向左、向右快捷鍵。以回車快捷鍵為例，當(dāng)用戶按回車鍵時(shí)，自動(dòng)更新當(dāng)前數(shù)據(jù)并切換至下一個(gè)單元格的文本框，按自上而下、從左到右的順序，快速實(shí)現(xiàn)參數(shù)值的輸入。

為了能夠?qū)崿F(xiàn)單元格上、下、左、右的切換，在構(gòu)建表格時(shí)需要為厘米列的單元格指定有規(guī)律的編號(hào)，編號(hào)格式為：td_行索引_列索引，行索引從尺碼數(shù)組sizeList中獲取，列索引從已選尺碼參數(shù)數(shù)組paramsSelect中獲取，其核心代碼如下。

使用split函數(shù)以“_”為分隔符號(hào)將當(dāng)前文本框所在單元格的編號(hào)轉(zhuǎn)換為數(shù)組，則arry[1]代表行索引、arry[2]代表列索引，當(dāng)需要下移時(shí)，將行索引值加1便可獲取目標(biāo)單元格，當(dāng)需要右移時(shí)，將列索引值加1便可獲取目標(biāo)單元格。以下移一個(gè)單元格為例，獲取目標(biāo)單元格的核心代碼如下。

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

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

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

let targetTD=document.getElementById(targetTD_Id)；

在對(duì)行索引或列索引進(jìn)行增減計(jì)算時(shí)，需要使用parseInt方法將索引值轉(zhuǎn)換為整型，否則會(huì)以字符串拼接的形式返回值，導(dǎo)致目標(biāo)單元格無(wú)法正確獲取。當(dāng)獲取到的targetTD結(jié)果為undefined時(shí)，表示當(dāng)前文本框所在的行是最后一行。

2.3 使用html2canvas實(shí)現(xiàn)商品尺碼圖的生成

HTML5新增的canvas標(biāo)簽用于在網(wǎng)頁(yè)上繪制圖形圖像，canvas元素本身并沒(méi)有繪圖能力，需要通過(guò)javascript腳本來(lái)實(shí)現(xiàn)圖形圖像的繪制[5-6]。html2canvas基于DOM元素進(jìn)行屏幕截圖，能夠?qū)⒛繕?biāo)區(qū)域繪制成canvas圖片[7]。使用html2canvas繪制商品尺碼圖時(shí)，存在兩個(gè)問(wèn)題：

（1）當(dāng)頁(yè)面出現(xiàn)滾動(dòng)條時(shí)，商品尺碼圖發(fā)生偏移且繪制不完整；

（2）當(dāng)頁(yè)面比例縮放時(shí)，商品尺碼圖有空白區(qū)或繪制不完整。

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

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

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

canvas.toDataURL方法的第一個(gè)參數(shù)為圖片類型，第2個(gè)參數(shù)為圖片的質(zhì)量（默認(rèn)值為0.92）。獲取到chiMaTu的是base64格式的圖片數(shù)據(jù)，使用axios以post方式實(shí)現(xiàn)商品尺碼圖的異步提交。axios是一個(gè)基于promise的HTTP庫(kù)，實(shí)現(xiàn)了對(duì)原生XHR的封裝，符合最新的ES規(guī)范，能夠自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)和防御跨站請(qǐng)求偽造（CSRF/XSRF）攻擊[9-10]。

2.4 商品尺碼圖的優(yōu)化與存儲(chǔ)

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

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

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

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

byte[]arr=Convert.FromBase64String(strbase64)；//轉(zhuǎn)換為字節(jié)數(shù)組

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

Bitmap bmp=new Bitmap(ms)；

…

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

3 結(jié)束語(yǔ)

在跨境電商行業(yè)發(fā)展趨勢(shì)良好的大環(huán)境下，實(shí)現(xiàn)跨境電商運(yùn)營(yíng)系統(tǒng)化管理有著廣闊的市場(chǎng)應(yīng)用前景。本文提出的基于Web技術(shù)的跨境電商商品尺碼圖的在線生成方案，將商品尺碼圖的制作在Web前端完成，降低了服務(wù)器端的負(fù)載，實(shí)現(xiàn)了尺碼參數(shù)語(yǔ)言自動(dòng)匹配、尺碼單位自動(dòng)換算、參數(shù)值輸入效果優(yōu)化，且生成的商品尺碼圖規(guī)格符合電商平臺(tái)的要求。該方案已投入實(shí)際應(yīng)用，具備性能好、效率高、易操作的優(yōu)點(diǎn)，符合跨境電商運(yùn)營(yíng)系統(tǒng)化管理的需求。