【技术实现步骤摘要】
本申请涉及基于浏览器实现商品在线diy定制，特别是涉及一种基于浏览器实现商品在线diy定制方法和系统。
技术介绍
1、随着电商购物场景的发展，越来越多的企业在进行礼品、定制品采购时，希望能够直接在平台上进行沟通并下单。礼品的定制细节是需要频繁沟通的环节，线下多轮沟通往往会浪费很多时间和精力，导致礼品的生产和配送时间被压缩，增大礼品采购按时交付的风险。为了避免线下沟通时间不方便的问题，我们在线上商城商品详情页上传了商品的定制细节和定制案例，并对商品定制时需要提供的素材进行了说明，让用户下单时上传定制所需的素材文件，我们在收到用户订单后，下载素材，并交由设计师进行简单的设计，然后和下单用户进行确认，用户确认通过后交由工厂生产。这个设计、沟通的流程会比较繁琐，所以商品的在线diy定制就十分必要。
2、传统技术中，用户下单时上传定制所需的素材文件，我们在收到用户订单后，下载素材，并交由设计师进行简单的设计，然后和下单用户进行确认，用户确认通过后交由工厂生产。
3、然而，现有技术存在以下缺点：消耗人力、沟通成本过高，简单的微定制都需要“用户上传素材”→设计师下载素材→设计并和客户沟通→工厂沟通→下单，整个沟通链路太长。产品的定制效果无法在平台上留存，线下沟通又只能保存在个人电脑上。通过多轮次的沟通，一般设计师电脑上只会保留最新的设计方案和素材，如果要追溯原始的文件和设计效果，如果设计师本地电脑未对每个版本做留存，则无法溯源，比如用户上传了初始版素材，得到设计师设计方案1.0，后又经过多轮沟通进行了1.1、1.2，2
技术实现思路
1、本申请提供一种基于浏览器实现商品在线diy定制方法和系统，旨在解决现有技术消耗人力以及沟通成本过高的问题。
2、第一方面，一种基于浏览器实现商品在线diy定制方法，所述方法包括：
3、接收预设商品图片，读取所述商品图片尺寸并确定所述商品图片的分辨率，根据所述商品图片尺寸和所述商品图片分辨率确定所述商品可定制区域，所述可定制区域用于diy的作用区域，在定制区域内添加元素来进行diy，所述diy支持图片和文本的添加；将diy后的预设商品定制效果内的定制模板元素存储到数据库sqlserver中；
4、响应于用户的选择，根据商品sku确定目标商品，在所述数据库sqlserver中获取所述目标商品定制模板元素，并在前端展示所述，目标商品定制模板，接收用户上传的个性化素材，用户在可定制区域内进行diy操作，所述操作包括添加文字、添加图片和调整素材位置；
5、将所述用户完成的diy定制数据整理为一份数据包，包括定制区域的dom结构、样式和素材信息，使用ajax或fetchapi将定制数据包发送到服务器；
6、服务器接收到所述定制数据包，进行解析，将解析后的数据存储到数据库中，生成定制效果图。
7、上述方案中，可选地，所述接收预设商品图片，读取所述商品图片尺寸并确定所述商品图片的分辨率，根据所述商品图片尺寸和所述商品图片分辨率确定所述目标商品可定制区域，包括：确定定制区域的a、b、c、d四个定点位置的坐标，四个坐标区域内的位置为可定制区域；
8、在定制区域四个点连线的区域内，确定定制区域的形状为圆形或者方形，作为定制区域的边界，进行定制区域切割时，计算a、b、c、d位置的坐标时，保证底图的长(l1)宽(w1)比例于展示区域的长(l2)宽(w2)比例相同。
9、上述方案中，可选地，所述可定制区域用于diy的作用区域，在定制区域内添加元素来进行diy，所述diy支持图片和文本的添加，包括：
10、所述图片的上传用到flash插件，浏览器开启flash支持，uploadify.swf插件将本地的文件上传至服务器，服务器接收到客户端上传的文件流后，读取文件的信息，长度l2和宽度w2，将文件信息通过http请求响应给客户端；客户端要计算l2和宽度w2的比例，将图片同等比例缩放展示在定制区域；文本的添加直接通过拼接form表单的input标签，通过jquery的append函数添加到html指定的节点位置，渲染到页面上。
11、上述方案中，可选地，所述用户在可定制区域内进行diy操作，所述操作包括添加文字、添加图片和调整素材位置，包括：
12、添加完要定制的元素后，对元素进行排版，包括放大、缩小、左右上下移动、图层上下移动、颜色设置、旋转操作，放大直接通过获取当前元素的宽(w)、高(h)，然后乘以固定系数1.1，重新赋值给当前元素来实现；缩小则乘以固定系数0.9来实现；左侧移动，则获取当前元素的left的值，减10px来实现向左偏移，向右偏移则加10px来实现；上偏移通过获取当前元素的top值，减10px来实现，下偏移则通过获取当前元素的bottom值，加10px来实现；图层上移，通过控制多个元素的z-index属性的值来控制哪个图层在上方；并通过z-index的值，来为图层的展示进行排序。
13、上述方案中，可选地，所述服务器接收到所述定制数据包，进行解析，将解析后的数据存储到数据库中，生成定制效果图，包括：
14、使用headless chrome或类似工具渲染定制页面并生成效果图，将生成的效果图保存到服务器，并提供一个链接供前端访问；
15、用户在前端页面查看效果图，并选择是否确认定制方案；
16、用户确认后，前端将订单信息发送到后端，后端生成订单记录；
17、设计师审核用户的定制方案，并进行优化调整，用户对设计师的最终设计进行确认，确认无误后进入生产流程；
18、生产流程包括：生产部门根据订单详情进行产品的定制生产，完成生产后进行包装，并将产品发货给客户。
19、第二方面，一种基于浏览器实现商品在线diy定制系统，所述系统包括：
20、商品预设定制模板模块：接收预设商品图片，读取所述商品图片尺寸并确定所述商品图片的分辨率，根据所述商品图片尺寸和所述商品图片分辨率确定所述商品可定制区域，所述可定制区域用于diy的作用区域，在定制区域内添加元素来进行diy，所述diy支持图片和文本的添加；将diy后的预设商品定制效果内的定制模板元素存储到数据库sqlserver中；
21、选品并进行diy定制模块：响应于用户的选择，根据商品sku确定目标商品，在所述数据库sqlserver中获取所述目标商品定制模板元素，并在前端展示所述，目标商品定制模板，接收用户上传的个性化素材，用户在可定制区域内进行diy操作，所述操作包括添加文字、添加图片和调整素材位置；将所述用户完成的diy定制数据整理为一份数据包，包括定制区域的dom结构、样式和素材信息，使本文档来自技高网...
【技术保护点】
1.一种基于浏览器实现商品在线DIY定制方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，所述接收预设商品图片，读取所述商品图片尺寸并确定所述商品图片的分辨率，根据所述商品图片尺寸和所述商品图片分辨率确定所述目标商品可定制区域，包括：确定定制区域的A、B、C、D四个定点位置的坐标，四个坐标区域内的位置为可定制区域；
3.根据权利要求1所述的方法，其特征在于，所述可定制区域用于DIY的作用区域，在定制区域内添加元素来进行DIY，所述DIY支持图片和文本的添加，包括：
4.根据权利要求1所述的方法，其特征在于，所述用户在可定制区域内进行DIY操作，所述操作包括添加文字、添加图片和调整素材位置，包括：
5.根据权利要求1所述的方法，其特征在于，所述服务器接收到所述定制数据包，进行解析，将解析后的数据存储到数据库中，生成定制效果图，包括：
6.一种基于浏览器实现商品在线DIY定制系统，其特征在于，所述系统包括：
7.根据权利要求6所述的系统，其特征在于，所述接收预设商品图片，读取所述商品图片
8.根据权利要求6所述的系统，其特征在于，所述可定制区域用于DIY的作用区域，在定制区域内添加元素来进行DIY，所述DIY支持图片和文本的添加，包括：
9.根据权利要求6所述的系统，其特征在于，所述用户在可定制区域内进行DIY操作，所述操作包括添加文字、添加图片和调整素材位置，包括：
10.根据权利要求6所述的系统，其特征在于，所述服务器接收到所述定制数据包，进行解析，将解析后的数据存储到数据库中，生成定制效果图，包括：
...【技术特征摘要】
1.一种基于浏览器实现商品在线diy定制方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，所述接收预设商品图片，读取所述商品图片尺寸并确定所述商品图片的分辨率，根据所述商品图片尺寸和所述商品图片分辨率确定所述目标商品可定制区域，包括：确定定制区域的a、b、c、d四个定点位置的坐标，四个坐标区域内的位置为可定制区域；
3.根据权利要求1所述的方法，其特征在于，所述可定制区域用于diy的作用区域，在定制区域内添加元素来进行diy，所述diy支持图片和文本的添加，包括：
4.根据权利要求1所述的方法，其特征在于，所述用户在可定制区域内进行diy操作，所述操作包括添加文字、添加图片和调整素材位置，包括：
5.根据权利要求1所述的方法，其特征在于，所述服务器接收到所述定制数据包，进行解析，将解析后的数据存储到数据库中，生成定制效果图，包括：
...【专利技术属性】
技术研发人员：杨新永，王龙喜，张丹丹，朱学渊，姚雨青，
申请(专利权)人：优优祝福北京科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。