整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
定義：簡單理解將網(wǎng)頁圖片切分為一些小碎片的過程，目的是為了提升網(wǎng)頁瀏覽的流暢性。
切片創(chuàng)建非常簡單，在裁剪工具箱中。
鼠標(biāo)繪制矩形選框范圍會成為“用戶切片”，而范圍外的會自動切分，成為“自動切片”
自動切片可以隱藏，也可以通過提升成為“用戶切片”
其他內(nèi)容與裁剪及選框工具差不多。
如果圖像包含參考線，可以基于參考線創(chuàng)建切片
如果切片處于隱藏狀態(tài)：視圖-顯示-切片，可以顯示切片。
復(fù)制：按住Alt鍵拖到切片；
組合：用切片選擇工具選擇多個切片（按住Shift），右鍵執(zhí)行，組合切片。
刪除：用切片選擇工具選擇切片后，鼠標(biāo)右鍵刪除切片，也可以用Delete或Backspace鍵來刪除切片。刪除切片后會重新自動生成切片以填充文檔區(qū)域。
清除全部切片：視圖>清除切片。
鎖定切片：鎖定后無法對切片移動、縮放或其他更改。執(zhí)行：視圖>鎖定切片。
自動切片無法進(jìn)行優(yōu)化設(shè)置，所以我們有時候需要提升為用戶切片。
切片的導(dǎo)出：執(zhí)行“文件>導(dǎo)出>存儲為Web所用格式（舊版）”，在彈出的窗口中設(shè)置“優(yōu)化格式”為GIF，單擊存儲完成導(dǎo)出。
網(wǎng)頁上不同狀態(tài)下，呈現(xiàn)出不同的顏色或者樣式的按鈕，方便用戶了解當(dāng)前操作狀態(tài)，這就是翻轉(zhuǎn)按鈕。
要創(chuàng)建翻轉(zhuǎn)按鈕至少需要兩個圖像，一個是用于表示正常狀態(tài)的圖像，另一個則用于表示處于更改狀態(tài)的圖像。
舉例：
素材1
實例33.1-右上角創(chuàng)建播放器翻轉(zhuǎn)按鈕效果
應(yīng)用矩形工具+橢圓工具+鋼筆工具，繪制模式為形狀，創(chuàng)建視頻播放器翻轉(zhuǎn)按鈕效果
網(wǎng)頁中可播放的視頻文件，如果不被明確標(biāo)注出來很可能被用戶忽略，所以我們增加翻轉(zhuǎn)按鈕，當(dāng)用戶將光標(biāo)移動到可播放的視頻上時，視頻縮略圖呈現(xiàn)為播放器效果。
重要內(nèi)容：再重復(fù)一次
切片的導(dǎo)出：執(zhí)行“文件>導(dǎo)出>存儲為Web所用格式（舊版）”，在彈出的窗口中設(shè)置“優(yōu)化格式”為GIF，單擊存儲完成導(dǎo)出。
不同的格式的圖像文件其質(zhì)量與大小也不同。
可供選擇的Web圖像的優(yōu)化格式包括：GIF、JPEG、PNG-8、PNG-24、WBMP
GIF：網(wǎng)頁最常用的格式。可顯示256種顏色，參數(shù)設(shè)置較多，重要的進(jìn)行解釋
顏色深度算法、顏色：可選擇、數(shù)值越大，顏色越接近原圖像
交錯：正在下載文件時，在瀏覽器中顯示圖像的低分辨率版本。
損耗：通常設(shè)置5~10，可減少文件大小5~40%，大于10，圖像的質(zhì)量也會降低。
JPEG：是一種比較成熟的有壓縮格式的圖像格式之一，雖然會丟失部分?jǐn)?shù)據(jù)，但人眼幾乎無法分別差異。
壓縮品質(zhì)：越大，圖像細(xì)節(jié)越豐富，但文件也越大。
模糊：數(shù)值越大，模糊效果越明顯，但會減少圖像的大小，最好不要超過0.5
雜邊：為原始圖像的透明像素設(shè)置一個填充顏色。
PNG-8:專門為Web開放的，支持244位圖像并產(chǎn)生無鋸齒狀的透明背景。
PNG-24：可以保留多達(dá)256個透明度級別，適合于壓縮連續(xù)色調(diào)圖像（？），但生成的文件比JPEG格式大得多。
WBMP：用于優(yōu)化移動設(shè)備的標(biāo)注格式，只支持1位顏色，只包含黑白像素。
執(zhí)行“文件>導(dǎo)出>Zoomify”，用于導(dǎo)出高分辨的JPEG文件和HTML文件，然后可以將這些文件上載到Web服務(wù)器上，以便查看著平移和縮放該圖像的更多細(xì)節(jié)。適用于在需要商品細(xì)節(jié)進(jìn)行展示時使用。
可能是要上傳吧。未上傳測試預(yù)覽效果失敗，可能是我的操作問題，有懂得的大神請指點下。
這章節(jié)內(nèi)容都是干貨，現(xiàn)在不是我的重點，后續(xù)從事時再單獨研究。
感謝大家的關(guān)注及閱讀。
下節(jié)學(xué)習(xí)3D立體效果，應(yīng)該很有趣。
咪~我是憬顏小姐姐~
今天我們講想做網(wǎng)頁設(shè)計方面的photoshop網(wǎng)頁切片與輸出~
今天的主要內(nèi)容：
14.1 Web安全色
14.2 網(wǎng)頁切片
14.3 網(wǎng)頁翻轉(zhuǎn)按鈕
14.4 Web圖形輸出
14.5 導(dǎo)出為Zoomify
課后練習(xí)篇 14.6 綜合實例：使用切片工具進(jìn)行網(wǎng)頁切片
文章最后有往期教學(xué)文章回顧~
本篇是長篇文章~有需要的小可愛可以按主要內(nèi)容尋找學(xué)習(xí)哦~(*′▽｀)ノノ~
網(wǎng)頁設(shè)計是近年來比較熱門的設(shè)計類型，與其他類型的平面設(shè)計不同，網(wǎng)頁由于其呈現(xiàn)介質(zhì)的不同，在設(shè)計制作的過程中需要注意一些問題，例如顏色的問題，文件大小的問題等。當(dāng)我們打開一個網(wǎng)頁時，會自動從服務(wù)器上下載網(wǎng)站頁面上的圖像內(nèi)容。那么圖像內(nèi)容的大小在很大程度上能夠影響網(wǎng)頁的瀏覽速度。所以在網(wǎng)頁內(nèi)容的輸出時就需要設(shè)置合適的輸出格式以及圖像壓縮比率。
Web安全色是指能在不同操作系統(tǒng)和不同瀏覽器之中同時正常顯示顏色。為什么在設(shè)計網(wǎng)頁時需要使用安全色呢？這時由于網(wǎng)頁需要在不同的操作系統(tǒng)下或在不同的顯示器中瀏覽，而不同操作系統(tǒng)或瀏覽器的顏色都有一些細(xì)微的差別。所以確保制作出的網(wǎng)頁顏色能夠在所有顯示器中顯示相同的效果是非常重要的，這就需要我們在制作網(wǎng)頁時使用“Web安全色”。
14.1.1 將非安全色轉(zhuǎn)化為安全色
在“拾色器”中選擇顏色時，在所選顏色右側(cè)出現(xiàn) 警告圖標(biāo)，就說明當(dāng)前選擇的顏色不是Web安全色，如圖所示。單擊該 圖標(biāo)，即可將當(dāng)前顏色替換為與其最接近的Web安全色，如圖所示。
14.1.2 在安全色狀態(tài)下工作
在“拾色器”中選擇顏色時，勾選窗口左下角的“只有Web顏色”選項，勾選之后，拾色器色域中的顏色明顯減少，此時選擇的顏色皆為安全色，如圖所示。
在網(wǎng)站設(shè)計工作中，頁面的美化是至關(guān)重要的一個步驟。頁面設(shè)計師在Photoshop中完成的版面內(nèi)容的編排后，并不能直接將整張網(wǎng)頁圖片傳到網(wǎng)絡(luò)上。而是需要將網(wǎng)頁進(jìn)行“切片”。“切片”是將圖片轉(zhuǎn)化成可編輯網(wǎng)頁的中間環(huán)節(jié)，通過切片可以將普通圖片變成DreamWeaver可以編輯的網(wǎng)頁格式。而且切片后的圖片可以更快的在網(wǎng)絡(luò)上傳播。
14.2.1什么是“網(wǎng)頁切片”
“網(wǎng)頁切片”可以簡單理解成將網(wǎng)頁圖片切分為一些小碎片的過程。為了使網(wǎng)頁瀏覽的流暢，在網(wǎng)頁制作中往往不會直接使用將整張大尺寸的圖像。通常情況下都會將整張圖像“分割”為多個部分，這就需要使用到“切片技術(shù)”。“切片技術(shù)”就是將一整張圖切割成若干小塊，并以表格的形式加以定位和保存。如圖所示為一個完整的網(wǎng)頁設(shè)計的圖片，如圖所示為將網(wǎng)頁切片導(dǎo)出后的效果。
14.2.2 認(rèn)識“切片工具”
切片工具“隱藏”在裁剪工具組中，右鍵單擊工具組按鈕，在彈出的列表中可以看到兩種切片工具：“切片工具”和“切片選擇工具”。如圖所示。
單擊工具組中的“切片工具” ，在選項欄中的樣式列表內(nèi)可以設(shè)置繪制切片的方式，選擇“正常”可以通過在畫面中按住并拖動鼠標(biāo)來確定切片的大小。選“固定長寬比”可以在后面“寬度”和“高度”輸入框中設(shè)置切片的寬高比。選擇“固定大小”可以在后面“寬度”和“高度”輸入框中設(shè)置切片的固定大小。如圖所示。如果當(dāng)前文檔包含參考線，單擊“基于參考線的切片”按鈕可以從參考線創(chuàng)建切片。
14.2.3 使用“切片工具”創(chuàng)建切片
創(chuàng)建切片
右鍵單擊工具組，在其中單擊“切片工具” ，然后選項欄中設(shè)置“樣式”為“正常”。在圖像中按住鼠標(biāo)左鍵并拖動鼠標(biāo)，繪制出一個矩形框，如圖所示。釋放鼠標(biāo)左鍵以后就可以創(chuàng)建一個用戶切片，而用戶切片以外的部分將生成自動切片，如圖所示。
切片的選擇
右鍵單擊工具組，在其中單擊“切片選擇工具” ，在圖像中單擊即可選中切片，如圖所示。如果想同時選中多個切片，可以按住“Shift”鍵的同時單擊其他切片，如圖所示。如果要移動切片，可以使用“切片選擇工具” 選擇切片，然后按住鼠標(biāo)左鍵并拖動鼠標(biāo)即可。
14.2.4 基于參考線創(chuàng)建切片
在包含參考線的文件中可以創(chuàng)建基于參考線的切片。單擊工具箱中的“切片工具”按鈕，然后在選項欄中單擊“基于參考線的切片”按鈕，如圖所示。即可基于參考線的劃分方式創(chuàng)建出切片，如圖所示。
14.2.5 基于圖層創(chuàng)建切片
選擇需要以其創(chuàng)建切片的圖層，如圖所示。執(zhí)行“圖層>新建基于圖層的切片”菜單命令，就可以創(chuàng)建包含該圖層所有像素的切片，如圖所示。基于圖層創(chuàng)建切片以后，當(dāng)對圖層進(jìn)行移動、縮放、變形等操作時，切片會跟隨該圖層進(jìn)行自動調(diào)整，如圖所示。刪除圖層后，基于該圖層創(chuàng)建的切片會被刪除，（無法刪除自動切片）。
14.2.6 自動劃分切片
使用“切片選擇工具” 單擊選擇一個切片，然后單擊選項欄中的“劃分”按鈕，如圖所示。打開“劃分切片”對話框，勾選“水平劃分為”/“垂直劃分為”選項后，可以在水平/垂直方向上劃分切片，設(shè)置切片的數(shù)值。
14.2.7 切片的編輯操作
創(chuàng)建出的切片還能夠進(jìn)行復(fù)制、組合、刪除等操作，以便于得到合適的切片。
復(fù)制切片
使用“切片選擇工具”選擇切片，然后按住Alt鍵的同時拖動切片，即可復(fù)制出相同的切片。
將多個切片組合為一個切片
在組合切片之前，先使用“切片選擇工具”選擇多個切片，然后單擊鼠標(biāo)右鍵在彈出的快捷鍵菜單中執(zhí)行“組合切片”命令。所選的切片即可組合為一個切片。
刪除切片
使用“切片選擇工具”選擇切片以后，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“刪除切片”命令，可以刪除切片。也可以按Delete鍵或Backspace鍵。
清除全部切片
執(zhí)行“視圖>清除切片”命令，可以刪除所有的用戶切片和基于圖層的切片。
鎖定切片
執(zhí)行“視圖>鎖定切片”菜單命令，可以鎖定所有的用戶切片和基于圖層的切片。鎖定切片以后，將無法對切片進(jìn)行移動、縮放或其他更改。再次執(zhí)行“視圖>鎖定切片”即可取消鎖定。
14.2.8 提升：自動切片轉(zhuǎn)換為用戶切片
“自動切片”無法進(jìn)行優(yōu)化設(shè)置，只有“用戶切片”才能夠進(jìn)行不同的優(yōu)化設(shè)置。所以需要將“自動切片”轉(zhuǎn)換為“用戶切片”。首先選擇“切片選擇工具”，然后在“自動切片”上單擊，接著單擊選項欄中的“提升”按鈕，如圖所示。隨即“自動切片”可以轉(zhuǎn)換為“用戶切片”，如圖所示。
【我是憬顏小姐姐~想知道更多有關(guān)平面設(shè)計的知識、免費教學(xué) 教程 免費學(xué)習(xí)平面設(shè)計等等~
請私信我“平面設(shè)計”~私信我有軟件安裝包和免費的練習(xí)素材哦~愛你們啾咪~
"Vue實現(xiàn)大文件切片上傳：輕松處理大型文件上傳難題"
## 引言
在現(xiàn)代Web應(yīng)用中，尤其是涉及大量數(shù)據(jù)交換的場景下，如云存儲、視頻分享等，大文件上傳成為了開發(fā)者經(jīng)常面臨的技術(shù)挑戰(zhàn)。Vue.js作為一款漸進(jìn)式JavaScript框架，其強(qiáng)大的靈活性和豐富的生態(tài)為我們解決此類問題提供了可能。本文將詳細(xì)解析如何在Vue項目中實現(xiàn)大文件的切片上傳，通過分塊傳輸優(yōu)化用戶體驗，確保數(shù)據(jù)完整性和穩(wěn)定性。
## 一、理解大文件切片上傳原理
**1.1 大文件切片上傳概念**
大文件切片上傳是指將一個大文件分割成多個小塊進(jìn)行上傳，每個小塊獨立上傳至服務(wù)器，并在服務(wù)器端重新組裝還原。這樣做的好處在于可以降低單次上傳失敗對整個上傳任務(wù)的影響，同時可利用瀏覽器的并發(fā)能力提高上傳速度。
**1.2 切片策略與重組**
在實際操作中，我們需要根據(jù)實際情況設(shè)置合理的切片大小（一般為幾MB），然后對文件進(jìn)行切片操作，并記錄每一片的元信息（如偏移量、大小等）。服務(wù)器端接收到所有切片后，按照元信息進(jìn)行文件重組。
## 二、Vue環(huán)境下的大文件切片上傳實現(xiàn)步驟
**2.1 配置Vue項目**
首先，確保你的Vue項目已經(jīng)創(chuàng)建并安裝了必要的依賴，如`axios`用于發(fā)送HTTP請求，`file-saver`或`Blob`用于處理文件。
```bash
npm install axios file-saver
```
**2.2 文件選擇與切片處理**
在HTML部分，我們創(chuàng)建一個文件輸入元素讓用戶選擇文件：
```html
<div id="app">
<input type="file" @change="handleFileChange" />
</div>
```
然后，在Vue實例的方法中，處理文件選擇事件并對文件進(jìn)行切片：
```javascript
export default {
methods: {
handleFileChange(event) {
const file=event.target.files[0];
this.sliceAndUpload(file);
},
sliceAndUpload(file) {
const blockSize=1024 * 1024 * 5; // 設(shè)置切片大小為5MB
const chunks=Math.ceil(file.size / blockSize);
for (let i=0; i < chunks; i++) {
const start=i * blockSize;
const end=(i + 1) * blockSize >=file.size ? file.size : (i + 1) * blockSize;
const chunk=file.slice(start, end);
this.uploadChunk(chunk, i, chunks);
}
},
},
};
```
**2.3 分塊上傳與進(jìn)度跟蹤**
接下來編寫`uploadChunk`方法，使用`axios`進(jìn)行分塊上傳，并添加進(jìn)度反饋功能：
```javascript
methods: {
async uploadChunk(chunk, index, totalChunks) {
const formData=new FormData();
formData.append('chunk', chunk);
formData.append('index', index);
formData.append('totalChunks', totalChunks);
try {
const response=await axios.post('/api/upload/chunk', formData, {
onUploadProgress: progressEvent=> {
const percentCompleted=Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`Chunk ${index + 1}/${totalChunks} uploaded: ${percentCompleted}%`);
},
});
// 在這里處理服務(wù)器返回的結(jié)果，確認(rèn)切片上傳成功
} catch (error) {
console.error('Chunk upload failed:', error);
}
},
},
```
**2.4 服務(wù)器端切片合并**
最后，你需要在服務(wù)器端編寫邏輯接收這些切片并進(jìn)行合并。這通常涉及到在服務(wù)器端存儲切片、校驗完整性以及最終合并為原文件。
## 三、優(yōu)化與拓展
- **錯誤重試機(jī)制**：當(dāng)某一塊上傳失敗時，應(yīng)具備自動重試的能力。
- **斷點續(xù)傳**：保存已上傳切片的信息，支持用戶在中斷后從上次中斷處繼續(xù)上傳。
- **客戶端MD5校驗**：計算每片切片的MD5值，與服務(wù)器端對比，確保數(shù)據(jù)完整性。
總結(jié)來說，Vue實現(xiàn)大文件切片上傳不僅提高了上傳效率，還提升了用戶體驗。希望這篇教程能幫助你在實際開發(fā)中應(yīng)對大文件上傳的需求，如有任何疑問，歡迎留言討論！
注：以上代碼僅為示例，具體實現(xiàn)需結(jié)合您的業(yè)務(wù)場景及服務(wù)器接口進(jìn)行調(diào)整。同時，請務(wù)必遵守相關(guān)法律法規(guī)，保護(hù)用戶隱私與數(shù)據(jù)安全。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
