前端工具【3】—— 图片处理

Rango 发布于2019-08-29 16:42 / 699人阅读

摘要：切图主要是用的工具就是等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。是打开文件捕捉活动窗口捕获窗口捕获矩形区域，可自行截图。新版的比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。

在写页面之前，很重要的一个技能是切图，根据UI设计的设计图，在了解页面结构和操作后进行分割，取出自己在开发过程中是用到的图片资源。
切图主要是用的工具就是PS、XD等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。

一、分享一些在线网站

（1）图片转Base64：https://tool.css-js.com/base6...
（2）图片格式转化：https://jinaconvert.com/cn/
（3）少量图片压缩不失真：https://tinypng.com/
（4）免费图标素材：http://669pic.com/
（5）平面设计工具:https://www.chuangkit.com/

二、FastStone Capture截图工具的使用

这是一款非常实用的屏幕截图抓取软件，占用空间小，安装启动后是这样的。

（1）是打开文件
（2）捕捉活动窗口
（3）捕获窗口
（4）捕获矩形区域，可自行截图。
（5）捕获手绘区域
（6）捕获全屏
（7）捕获滚动窗口，就像手机滚动截屏
（8）捕获固定区域
（9）视频录像机
（10）输出
（11）设置实用小工具
我个人比较喜欢使用的工具就是（7）、（9）、（11）里面的小工具，想拾色器、放大镜等。

三、切图工具

1、Photoshop：切图仔必备，在慕课网上有一个详细的视频讲解：https://www.imooc.com/learn/506
切图是开发中很重要的一步，图片切好了对于后面我们写页面会是事半功倍，在切图中我们需要注意的是怎么切，是不是把每一行张图都很仔细的切下来呢，不是的，是根据页面结构，有目的的切，要想想切出来的图是否符合页面的需求。新版的CC比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。

2、XD：Adobe公司的另一个产品，原型设计工具，现在UI同事使用的设计软件是这个，所以我就直接使用这个软件切图了，这个软件带有一件导出功能，一般直接选择我们需要的图片导出就行了，需要注意的一点就是要安装与设计图相同的网络字体，以免和设计图效果不一致。

GPU云服务器云服务器图片处理前端工具图片处理标准图片处理方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113925.html

前端工具【3】—— 图片处理

摘要：切图主要是用的工具就是等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。是打开文件捕捉活动窗口捕获窗口捕获矩形区域，可自行截图。新版的比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。在写页面之前，很重要的一个技能是切图，根据UI设计的设计图，在了解页面结构和操作后进行分割，取出自己在开发过程中是用到的图片资源。切图主要是用的工具...

MobService 2019-08-02 16:05 评论0 收藏0
Java Web 前端高性能优化（一）

摘要：一引言前端的高性能部分，主要是指减少请求数减少传输的数据以及提高用户体验，在这个部分，图片的优化显得至关重要。 Web 发展的速度让许多人叹为观止，层出不穷的组件、技术，只需要合理的组合、恰当的设置，就可以让 Web 程序性能不断飞跃。所有 Web 的思想都是通用的，它们也可以运用到 Java Web。这一系列的文章，主要讲解网页前端性能优化，是与用户最直接接触的。事实证明，与其消耗...

lemon 2019-08-14 12:53 评论0 收藏0
前端通用国际化解决方案

摘要：前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。接下来针对这几块内容并结合日常的开发流程说明国际化的通用解决方案。文章首发于个人blog，欢迎大家关注。 DI18n 前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开...

lingdududu 2019-08-20 15:46 评论0 收藏0
前端每周清单第 43 期：2017 JavaScript 回顾、Rust 与 WebAssembly

摘要：杨冀龙是安全焦点民间白帽黑客组织核心成员，被浪潮之巅评为中国新一代黑客领军人物之一他在本文中依次分享了对于黑客的定义如何从黑客成为一名安全创业者技术创业踩过的坑给技术创业者建议等内容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清单专注前端领域内容，以对外文资料的搜集为...

xorpay 2019-08-22 11:15 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

Anshiii 2019-08-30 13:21 评论0 收藏0