前端工具【3】—— 圖片處理

Rango 發布于2019-08-29 16:42 / 700人閱讀

摘要：切圖主要是用的工具就是等等，除此之外，在開發過程中我們也會用到其他工具，以下介紹一些有關于圖片處理的操作。是打開文件捕捉活動窗口捕獲窗口捕獲矩形區域，可自行截圖。新版的比之前那些版本增加了一鍵導出功能，這個功能很大程度方便了我們拆分圖片。

在寫頁面之前，很重要的一個技能是切圖，根據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云服務器圖片處理前端工具圖片處理標準圖片處理方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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