切图数据上传方法、装置、存储介质及计算机设备与流程

本申请涉及软件，尤其涉及一种切图数据上传方法、装置、存储介质及计算机设备。

背景技术：

1、随着互联网技术的不断发展，出现了许多可在线协同的文档编辑、设计开发平台。在利用在线平台进行前端设计完成后，前端开发工程师需要在代码中引入设计完成的切图，需要先手动下载切图后上传至压缩工具进行图片压缩处理，再将图片复制到对应的开发项目中，最后再将切图在本地的存储路径写入代码。流程十分繁琐，导致开发效率较低。

技术实现思路

1、本申请实施例提供了一种切图数据上传方法、装置、存储介质及计算机设备，能够快速实现切图的上传处理并返回切图链接，提高前端开发效率。

2、第一方面，本申请提供了一种切图数据上传方法，所述方法包括：

3、基于在浏览器中添加的插件监听浏览器页面中的点击事件；

4、响应于所述点击事件，从所述浏览器中获取所述点击事件指向图片的图片链接；

5、在所述浏览器页面中插入切图上传接口按钮；

6、响应于用户通过所述切图上传接口按钮触发的上传操作，调用图片压缩工具根据所述图片链接获取图片并对所述图片进行压缩处理；

7、将压缩处理后得到的切图存储至设定的云存储中心；

8、获取所述切图在所述云存储中心存储对应的切图链接。

9、在其中一个实施例中，所述方法还包括：

10、响应于图片设定配置请求，在所述浏览器页面显示配置界面；所述配置页面用于配置切图的上传尺寸、链接协议、云存储中心中的至少一项；

11、响应于所述配置页面提交的配置选项，基于所述配置选项更改切图上传配置。

12、在其中一个实施例中，所述方法还包括：

13、将所述切图链接和/或自定义的图片名称添加至粘贴板。

14、在其中一个实施例中，所述配置页面还用于配置添加至粘贴板的粘贴文本为切图链接和/或图片名称。

15、在其中一个实施例中，所述方法还包括：

16、若所述切图存储至所述云存储中心，则生成上传成功提示；

17、在所述浏览器页面中显示所述上传成功提示。

18、第二方面，本申请提供了一种切图数据上传装置，包括：

19、监听模块，用于基于在浏览器中添加的插件监听浏览器页面中的点击事件；

20、图片链接获取模块，用于响应于所述点击事件，从所述浏览器中获取所述点击事件指向图片的图片链接；

21、按钮插入模块，用于在所述浏览器页面中插入切图上传接口按钮；

22、图片压缩模块，用于响应于用户通过所述切图上传接口按钮触发的上传操作，调用图片压缩工具根据所述图片链接获取图片并对所述图片进行压缩处理；

23、切图存储模块，用于将压缩处理后得到的切图存储至设定的云存储中心；

24、切图链接获取模块，用于获取所述切图在所述云存储中心存储对应的切图链接。

25、在其中一个实施例中，所述装置还包括：

26、配置页面显示模块，用于响应于图片设定配置请求，在所述浏览器页面显示配置界面；所述配置页面用于配置切图的上传尺寸、链接协议、云存储中心中的至少一项；

27、配置设定模块，用于响应于所述配置页面提交的配置选项，基于所述配置选项更改切图上传配置。

28、在其中一个实施例中，所述装置还包括：

29、自动粘贴模块，用于将所述切图链接或自定义的图片名称添加至粘贴板。

30、第三方面，本申请提供了一种存储介质，所述存储介质中存储有计算机可读指令，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行如上述任一所述切图数据上传方法的步骤。

31、第四方面，本申请提供了一种计算机设备，包括：一个或多个处理器，以及存储器；

32、所述存储器中存储有计算机可读指令，所述一个或多个处理器执行时所述计算机可读指令时，执行如上述任一所述切图数据上传方法的步骤。

33、从以上技术方案可以看出，本申请实施例具有以下优点：

34、本申请提供的切图数据上传方法、装置、存储介质及计算机设备，通过插件对浏览器页面中的点击事件进行监听，在发生点击事件时获取点击事件指向图片的图片链接，并在浏览器页面中插入切图上传接口按钮，用户通过切图上传接口按钮触发上传操作时，调用图片压缩工具根据图片链接获取图片进行压缩能处理，压缩处理后得到的切图直接上传至云存储中心进行存储，自动获取切图存储于云存储中心对应的切图链接，后续前端开发可以直接使用切图链接，全过程操作简单，自动实现图片的处理上传并反馈切图链接，提高开发效率。

技术特征：

1.一种切图数据上传方法，其特征在于，所述方法包括：

2.根据权利要求1所述的切图数据上传方法，其特征在于，所述方法还包括：

3.根据权利要求2所述的切图数据上传方法，其特征在于，所述方法还包括：

4.根据权利要求3所述的切图数据上传方法，其特征在于，所述配置页面还用于配置添加至粘贴板的粘贴文本为切图链接和/或图片名称。

5.根据权利要求1所述的切图数据上传方法，其特征在于，所述方法还包括：

6.一种切图数据上传装置，其特征在于，包括：

7.根据权利要求6所述的切图数据上传装置，其特征在于，所述装置还包括：

8.根据权利要求7所述的切图数据上传装置，其特征在于，所述装置还包括：

9.一种存储介质，其特征在于：所述存储介质中存储有计算机可读指令，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行如权利要求1至5中任一项所述切图数据上传方法的步骤。

10.一种计算机设备，其特征在于，包括：一个或多个处理器，以及存储器；

技术总结
本申请提供了一种切图数据上传方法、装置、存储介质及计算机设备。该方法包括：基于在浏览器中添加的插件监听浏览器页面中的点击事件；响应于所述点击事件，从所述浏览器中获取所述点击事件指向图片的图片链接；在所述浏览器页面中插入切图上传接口按钮；响应于用户通过所述切图上传接口按钮触发的上传操作，调用图片压缩工具根据所述图片链接获取图片并对所述图片进行压缩处理；将压缩处理后得到的切图存储至设定的云存储中心；获取所述切图在所述云存储中心存储对应的切图链接。本申请能够帮助开发人员快速自动地实现在线UI设计平台切图的上传处理并返回切图链接，提高前端开发效率。

技术研发人员：叶锦湛,王小洲
受保护的技术使用者：创优数字科技（广东）有限公司
技术研发日：
技术公布日：2024/4/24