跨境电商商品尺码图的在线生成研究

叶文全

（闽北职业技术学院信息系，福建南平353000）

跨境电商商品尺码图的构成要素主要包括商品尺码、尺码参数、尺码单位、提示文字。与国内的电商商品尺码图相比，其不同点主要体现在语言不同、尺码单位不同。以亚马逊跨境电商平台为例，语言涉及英语、日语、德语等，尺码单位涉及厘米、英寸等。跨境电商商品尺码图的制作涉及尺码参数的翻译、尺码单位的换算，使用传统的制图软件进行制作，难度大、效率低。因此，如何高效、便捷地实现跨境电商商品尺码图的制作，具有较高的经济价值和研究意义。通过对商品尺码图及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前端完成，降低了服务器端的负载，实现了尺码参数语言自动匹配、尺码单位自动换算、参数值输入效果优化，且生成的商品尺码图规格符合电商平台的要求。该方案已投入实际应用，具备性能好、效率高、易操作的优点，符合跨境电商运营系统化管理的需求。