Ps小白成長記：第33天「網(wǎng)頁切片與輸出」

、網(wǎng)頁切片

定義：簡單理解將網(wǎng)頁圖片切分為一些小碎片的過程，目的是為了提升網(wǎng)頁瀏覽的流暢性。

切片創(chuàng)建非常簡單，在裁剪工具箱中。

鼠標(biāo)繪制矩形選框范圍會成為“用戶切片”，而范圍外的會自動切分，成為“自動切片”

自動切片可以隱藏，也可以通過提升成為“用戶切片”

其他內(nèi)容與裁剪及選框工具差不多。

如果圖像包含參考線，可以基于參考線創(chuàng)建切片

如果切片處于隱藏狀態(tài)：視圖-顯示-切片，可以顯示切片。

創(chuàng)建出的切片可以復(fù)制、組合、刪除等操作，以便得到合適的切片。

復(fù)制：按住Alt鍵拖到切片；

組合：用切片選擇工具選擇多個(gè)切片（按住Shift），右鍵執(zhí)行，組合切片。

刪除：用切片選擇工具選擇切片后，鼠標(biāo)右鍵刪除切片，也可以用Delete或Backspace鍵來刪除切片。刪除切片后會重新自動生成切片以填充文檔區(qū)域。

清除全部切片：視圖>清除切片。

鎖定切片：鎖定后無法對切片移動、縮放或其他更改。執(zhí)行：視圖>鎖定切片。

自動切片無法進(jìn)行優(yōu)化設(shè)置，所以我們有時(shí)候需要提升為用戶切片。

切片的導(dǎo)出：執(zhí)行“文件>導(dǎo)出>存儲為Web所用格式（舊版）”，在彈出的窗口中設(shè)置“優(yōu)化格式”為GIF，單擊存儲完成導(dǎo)出。

3、網(wǎng)頁翻轉(zhuǎn)按鈕

網(wǎng)頁上不同狀態(tài)下，呈現(xiàn)出不同的顏色或者樣式的按鈕，方便用戶了解當(dāng)前操作狀態(tài)，這就是翻轉(zhuǎn)按鈕。

要創(chuàng)建翻轉(zhuǎn)按鈕至少需要兩個(gè)圖像，一個(gè)是用于表示正常狀態(tài)的圖像，另一個(gè)則用于表示處于更改狀態(tài)的圖像。

舉例：

素材1

實(shí)例33.1-右上角創(chuàng)建播放器翻轉(zhuǎn)按鈕效果

應(yīng)用矩形工具+橢圓工具+鋼筆工具，繪制模式為形狀，創(chuàng)建視頻播放器翻轉(zhuǎn)按鈕效果

網(wǎng)頁中可播放的視頻文件，如果不被明確標(biāo)注出來很可能被用戶忽略，所以我們增加翻轉(zhuǎn)按鈕，當(dāng)用戶將光標(biāo)移動到可播放的視頻上時(shí)，視頻縮略圖呈現(xiàn)為播放器效果。

4、Web圖形輸出

重要內(nèi)容：再重復(fù)一次

切片的導(dǎo)出：執(zhí)行“文件>導(dǎo)出>存儲為Web所用格式（舊版）”，在彈出的窗口中設(shè)置“優(yōu)化格式”為GIF，單擊存儲完成導(dǎo)出。

設(shè)置不同的存儲格式

不同的格式的圖像文件其質(zhì)量與大小也不同。

可供選擇的Web圖像的優(yōu)化格式包括：GIF、JPEG、PNG-8、PNG-24、WBMP

GIF：網(wǎng)頁最常用的格式。可顯示256種顏色，參數(shù)設(shè)置較多，重要的進(jìn)行解釋

顏色深度算法、顏色：可選擇、數(shù)值越大，顏色越接近原圖像

交錯(cuò)：正在下載文件時(shí)，在瀏覽器中顯示圖像的低分辨率版本。

損耗：通常設(shè)置5~10，可減少文件大小5~40%，大于10，圖像的質(zhì)量也會降低。

JPEG：是一種比較成熟的有壓縮格式的圖像格式之一，雖然會丟失部分?jǐn)?shù)據(jù)，但人眼幾乎無法分別差異。

壓縮品質(zhì)：越大，圖像細(xì)節(jié)越豐富，但文件也越大。

模糊：數(shù)值越大，模糊效果越明顯，但會減少圖像的大小，最好不要超過0.5

雜邊：為原始圖像的透明像素設(shè)置一個(gè)填充顏色。

PNG-8:專門為Web開放的，支持244位圖像并產(chǎn)生無鋸齒狀的透明背景。

PNG-24：可以保留多達(dá)256個(gè)透明度級別，適合于壓縮連續(xù)色調(diào)圖像（？），但生成的文件比JPEG格式大得多。

WBMP：用于優(yōu)化移動設(shè)備的標(biāo)注格式，只支持1位顏色，只包含黑白像素。

5、導(dǎo)出為Zoomify

執(zhí)行“文件>導(dǎo)出>Zoomify”，用于導(dǎo)出高分辨的JPEG文件和HTML文件，然后可以將這些文件上載到Web服務(wù)器上，以便查看著平移和縮放該圖像的更多細(xì)節(jié)。適用于在需要商品細(xì)節(jié)進(jìn)行展示時(shí)使用。

可能是要上傳吧。未上傳測試預(yù)覽效果失敗，可能是我的操作問題，有懂得的大神請指點(diǎn)下。

這章節(jié)內(nèi)容都是干貨，現(xiàn)在不是我的重點(diǎn)，后續(xù)從事時(shí)再單獨(dú)研究。

感謝大家的關(guān)注及閱讀。

下節(jié)學(xué)習(xí)3D立體效果，應(yīng)該很有趣。

tmlq能夠?qū)?HTML 數(shù)據(jù)進(jìn)行 sed 或 grep 操作。我們可以使用 htmlq 搜索、切片和過濾 HTML 數(shù)據(jù)。讓我們看看如何在 Linux 或 Unix 上安裝和使用這個(gè)方便的工具并處理 HTML 數(shù)據(jù)。

什么是htmlq？

htmlq類似于 jq，但用于 HTML。使用 CSS 選擇器從 HTML 文件中提取部分內(nèi)容。在 CSS 中，選擇器用于定位我們想要設(shè)置樣式的網(wǎng)頁上的 HTML 元素。例如，我們可以使用此工具輕松提取圖像或其他 URL。

安裝htmlq

首先需要在系統(tǒng)中安裝cargo然后使用cargo來安裝htmlq：

[root@localhost ~]# yum -y install cargo
[root@localhost ~]# cargo install htmlq

設(shè)置可執(zhí)行的路徑

確保將 $HOME/.cargo/bin 添加到 PATH 變量中，以便能夠使用 export 命令運(yùn)行已安裝的二進(jìn)制文件：

[root@localhost ~]# echo 'export PATH="$PATH:$HOME/.cargo/bin"' >> ~/.bash_profile 
[root@localhost ~]# . ~/.bash_profile

如何使用 htmlq 從 HTML 文件中提取內(nèi)容？

下面是使用curl和htmlq的用法：

curl -s url | htmlq '#css-selector'
curl -s url2 | htmlq '.css-selector'
curl -s https://www.linuxprobe.com | htmlq --pretty '#content' | more

讓我們找到頁面中的所有鏈接。例如：

[root@localhost ~]# curl -s https://www.linuxprobe.com | htmlq --attribute href a

人性化顯示HTML:

[root@localhost ~]# curl --silent https://mgdm.net | htmlq --pretty '#posts'

幫助手冊

使用下面命令查看幫助頁面：

[root@localhost ~]# htmlq --help
htmlq 0.3.0
Michael Maclean <michael@mgdm.net>
Runs CSS selectors on HTML

USAGE:
    htmlq [FLAGS] [OPTIONS] [selector]...

FLAGS:
    -B, --detect-base          Try to detect the base URL from the <base> tag in the document. If not found, default to
                               the value of --base, if supplied
    -h, --help                 Prints help information
    -w, --ignore-whitespace    When printing text nodes, ignore those that consist entirely of whitespace
    -p, --pretty               Pretty-print the serialised output
    -t, --text                 Output only the contents of text nodes inside selected elements
    -V, --version              Prints version information

OPTIONS:
    -a, --attribute <attribute>    Only return this attribute (if present) from selected elements
    -b, --base <base>              Use this URL as the base for links
    -f, --filename <FILE>          The input file. Defaults to stdin
    -o, --output <FILE>            The output file. Defaults to stdout

ARGS:
    <selector>...    The CSS expression to select [default: html]

總結(jié)

htmlq能夠?qū)?HTML 數(shù)據(jù)進(jìn)行 sed 或 grep 操作。我們可以使用 htmlq 搜索、切片和過濾 HTML 數(shù)據(jù)。

"Vue實(shí)現(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àng)目中實(shí)現(xiàn)大文件的切片上傳，通過分塊傳輸優(yōu)化用戶體驗(yàn)，確保數(shù)據(jù)完整性和穩(wěn)定性。

## 一、理解大文件切片上傳原理

**1.1 大文件切片上傳概念**

大文件切片上傳是指將一個(gè)大文件分割成多個(gè)小塊進(jìn)行上傳，每個(gè)小塊獨(dú)立上傳至服務(wù)器，并在服務(wù)器端重新組裝還原。這樣做的好處在于可以降低單次上傳失敗對整個(gè)上傳任務(wù)的影響，同時(shí)可利用瀏覽器的并發(fā)能力提高上傳速度。

**1.2 切片策略與重組**

在實(shí)際操作中，我們需要根據(jù)實(shí)際情況設(shè)置合理的切片大小（一般為幾MB），然后對文件進(jìn)行切片操作，并記錄每一片的元信息（如偏移量、大小等）。服務(wù)器端接收到所有切片后，按照元信息進(jìn)行文件重組。

## 二、Vue環(huán)境下的大文件切片上傳實(shí)現(xiàn)步驟

**2.1 配置Vue項(xiàng)目**

首先，確保你的Vue項(xiàng)目已經(jīng)創(chuàng)建并安裝了必要的依賴，如`axios`用于發(fā)送HTTP請求，`file-saver`或`Blob`用于處理文件。

```bash

npm install axios file-saver

```

**2.2 文件選擇與切片處理**

在HTML部分，我們創(chuàng)建一個(gè)文件輸入元素讓用戶選擇文件：

```html

</div>

```

然后，在Vue實(shí)例的方法中，處理文件選擇事件并對文件進(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àn)完整性以及最終合并為原文件。

## 三、優(yōu)化與拓展

- **錯(cuò)誤重試機(jī)制**：當(dāng)某一塊上傳失敗時(shí)，應(yīng)具備自動重試的能力。

- **斷點(diǎn)續(xù)傳**：保存已上傳切片的信息，支持用戶在中斷后從上次中斷處繼續(xù)上傳。

- **客戶端MD5校驗(yàn)**：計(jì)算每片切片的MD5值，與服務(wù)器端對比，確保數(shù)據(jù)完整性。

總結(jié)來說，Vue實(shí)現(xiàn)大文件切片上傳不僅提高了上傳效率，還提升了用戶體驗(yàn)。希望這篇教程能幫助你在實(shí)際開發(fā)中應(yīng)對大文件上傳的需求，如有任何疑問，歡迎留言討論！

注：以上代碼僅為示例，具體實(shí)現(xiàn)需結(jié)合您的業(yè)務(wù)場景及服務(wù)器接口進(jìn)行調(diào)整。同時(shí)，請務(wù)必遵守相關(guān)法律法規(guī)，保護(hù)用戶隱私與數(shù)據(jù)安全。

在線咨詢

上一篇：一文讀懂 CSS 單位
下一篇：新升級功能：生成智體節(jié)點(diǎn)、3D場館的靜態(tài)網(wǎng)站-方便SEO收錄

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。