小猿圈入門html5教程之利用canvas實(shí)現(xiàn)圖片壓

小猿圈入門html5教程之利用canvas實(shí)現(xiàn)圖片壓縮方法

在學(xué)習(xí)前端你的小伙伴都在迷茫遇到問題，找不到老師怎么辦？這些也是小猿圈web前端老師擔(dān)心的，以后每天小猿圈都會為大家分享一些關(guān)于學(xué)習(xí)前端中的一些小問題，今天分享的是利用canvas實(shí)現(xiàn)圖片壓縮方法。

項(xiàng)目中做身份證識別時(shí)，需要傳送圖片的base64格式編碼，但是手機(jī)拍攝的照片都太大了，轉(zhuǎn)成base64簡直可怕，因此找了一下解決辦法。

涉及到的知識點(diǎn)

onchange事件是在上傳完文件之后觸發(fā)

使用files屬性獲取到上傳的文件對象

readAsDataURL用于轉(zhuǎn)換成base64編碼

區(qū)分canvas的畫布和繪畫環(huán)境：

畫布：對應(yīng)代碼中的cvs，可以設(shè)置畫布width，height;

繪畫環(huán)境：對應(yīng)代碼中的ctx，可以設(shè)置fillStyle，fillRect等;

使用canvas自帶的drawImage()方法將圖片畫到canvas上

想取到壓縮后圖片的base64可以使用canvas自帶的toDataURL()方法

完整代碼

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>Document</title>

</head>

<body>

<inputtype="file"onchange="loadImg(this)">

<hr>

<imgsrc=""alt="">

<hr>

//上傳圖片

functionloadImg(me){

letimg=document.querySelector('img');

letcvs=document.querySelector('canvas');

letfile=me.files[0];//獲取到文件對象

//上傳的圖片大于500KB時(shí)才壓縮

if(file&&(file.size/1024>500)){

letreader=newFileReader();

reader.readAsDataURL(file);//轉(zhuǎn)成base64編碼

reader.onload=function(e){

letnaturalBase64=e.target.result;//獲取base64編碼，這是原圖的

img.src=naturalBase64;

img.onload=function(){

letratio=img.naturalWidth/img.naturalHeight;//獲取原圖比例,為了等比壓縮

cvs.width=400;

cvs.height=cvs.width/ratio;

letctx=cvs.getContext('2d');

ctx.drawImage(img,0,0,cvs.width,cvs.height);//畫在canvas上

//壓縮后新圖的base64

letzipBase64=cvs.toDataURL();

}

</script>

</body>

</html>

關(guān)于壓縮后的圖片大小

這里提供一個(gè)開箱即用的方法，baseStr是一個(gè)完整的Base64編碼

代碼：

functioncalcBase(baseStr){

vartag='base64,';

baseStr=baseStr.substring(baseStr.indexOf(tag)+tag.length);

vareqTagIndex=baseStr.indexOf('=');

baseStr=eqTagIndex!=-1?baseStr.substring(0,eqTagIndex):baseStr;

varstrLen=baseStr.length;

varfileSize=strLen-(strLen/8)*2;

console.log("文件大小:"+(fileSize/1024).toFixed(1)+'KB');

}

今天的知識點(diǎn)就分享到這里了，有需要的朋友歡迎點(diǎn)贊評論轉(zhuǎn)發(fā)，想了解更多web前端開發(fā)內(nèi)容的朋友可以關(guān)注小猿圈的每天的動(dòng)態(tài)，會不定時(shí)更新很多更好的內(nèi)容奉獻(xiàn)給大家，希望對你的學(xué)習(xí)有所幫助。

當(dāng)今互聯(lián)網(wǎng)時(shí)代，HTML 和 Markdown 都是非常流行的標(biāo)記語言。HTML 用于構(gòu)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容，而 Markdown 則以其簡潔易讀的語法被廣泛用于編寫文檔、博客文章等。在很多場景下，我們需要將 HTML 內(nèi)容轉(zhuǎn)換為 Markdown 格式，例如網(wǎng)頁內(nèi)容抓取、文檔格式轉(zhuǎn)換等。

Rust 作為一門以安全、性能和可靠性著稱的系統(tǒng)級編程語言，也提供了相應(yīng)的庫來處理 HTML 到 Markdown 的轉(zhuǎn)換。本文將介紹一個(gè)名為 htmd 的 Rust 庫，它提供了一種高效且易于使用的方式來完成這項(xiàng)任務(wù)。

htmd 簡介

htmd 是一個(gè)受 JavaScript 庫 turndown.js 啟發(fā)而開發(fā)的 Rust 庫，用于將 HTML 文檔轉(zhuǎn)換為 Markdown 格式。它具有以下特點(diǎn)：

功能豐富： 提供了與 turndown.js 相媲美的豐富選項(xiàng)，可以靈活地控制轉(zhuǎn)換過程。
可靠性高： 通過了 turndown.js 的所有測試用例，確保轉(zhuǎn)換結(jié)果的準(zhǔn)確性。
依賴項(xiàng)少： 僅依賴于 html5ever 庫，輕量級且易于集成。
性能優(yōu)異： 轉(zhuǎn)換速度快，能夠高效處理大型 HTML 文檔。

htmd 的安裝

在使用 htmd 之前，我們需要先安裝它。將以下依賴項(xiàng)添加到你的 Cargo.toml 文件中：

[dependencies]
htmd="0.1"

htmd 的使用

基本轉(zhuǎn)換

使用 htmd 進(jìn)行 HTML 到 Markdown 的基本轉(zhuǎn)換非常簡單。以下代碼展示了如何將一個(gè) <h1> 標(biāo)簽轉(zhuǎn)換為 Markdown 中的 # 標(biāo)題：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown=HtmlToMarkdown::new();
    let html="<h1>這是一個(gè)標(biāo)題</h1>";
    let result=markdown.convert(html).unwrap();
    assert_eq!(result, "# 這是一個(gè)標(biāo)題\n");
}

跳過標(biāo)簽

在某些情況下，我們可能希望跳過 HTML 文檔中的某些標(biāo)簽，例如 <script> 和 <style> 標(biāo)簽。htmd 提供了 skip_tags 方法來實(shí)現(xiàn)這一點(diǎn)：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown=HtmlToMarkdown::builder()
        .skip_tags(vec!["script", "style"])
        .build();

    let html=r#"
        <script>
            // 一些 JavaScript 代碼
        </script>
        <h1>這是一個(gè)標(biāo)題</h1>
    "#;

    let result=markdown.convert(html).unwrap();
    assert_eq!(result, "# 這是一個(gè)標(biāo)題\n");
}

自定義標(biāo)簽處理器

htmd 允許我們自定義標(biāo)簽處理器來處理特定的 HTML 標(biāo)簽。例如，我們可以定義一個(gè)處理器將 <img> 標(biāo)簽轉(zhuǎn)換為 Markdown 中的圖片語法：

use htmd::{HtmlToMarkdown, HandleResult};
use html5ever::tendril::StrTendril;
use html5ever::QualName;

fn main() {
    let markdown=HtmlToMarkdown::builder()
        .add_handler(
            vec!["img"],
            |el| {
                let src=el
                    .attrs
                    .iter()
                    .find(|(name, _)| name.local.as_ref()=="src")
                    .map(|(_, value)| value.as_ref());

                let alt=el
                    .attrs
                    .iter()
                    .find(|(name, _)| name.local.as_ref()=="alt")
                    .map(|(_, value)| value.as_ref());

                match (src, alt) {
                    (Some(src), Some(alt))=> Some(format!("![{}]({})", alt, src)),
                    _=> None,
                }
            },
        )
        .build();

    let html=r#"<img src="https://example.com/image.jpg" alt="圖片描述">"#;
    let result=markdown.convert(html).unwrap();
    assert_eq!(result, "![圖片描述](https://example.com/image.jpg)\n");
}

多線程處理

htmd 支持多線程處理，可以充分利用多核 CPU 的性能來加速轉(zhuǎn)換過程。以下代碼展示了如何使用多線程將多個(gè) HTML 文檔轉(zhuǎn)換為 Markdown：

use htmd::HtmlToMarkdown;
use std::sync::Arc;
use std::thread;

fn main() {
    let markdown=Arc::new(HtmlToMarkdown::new());
    let html_docs=vec![
        "<h1>文檔 1</h1>",
        "<h2>文檔 2</h2>",
        "<h3>文檔 3</h3>",
    ];

    let threads: Vec<_>=html_docs
        .into_iter()
        .map(|html| {
            let markdown=markdown.clone();
            thread::spawn(move || {
                let result=markdown.convert(html).unwrap();
                println!("{}", result);
            })
        })
        .collect();

    for thread in threads {
        thread.join().unwrap();
    }
}

結(jié)論

htmd 是一個(gè)功能強(qiáng)大且易于使用的 Rust 庫，用于將 HTML 文檔轉(zhuǎn)換為 Markdown 格式。它提供了豐富的選項(xiàng)、自定義標(biāo)簽處理器和多線程支持，可以滿足各種轉(zhuǎn)換需求。如果你正在尋找一種高效可靠的 HTML 到 Markdown 轉(zhuǎn)換解決方案，htmd 絕對值得一試。

最近幾年，Web前端開發(fā)的最熱領(lǐng)域當(dāng)屬HTML5，HTML5技術(shù)已經(jīng)從根本上改變了開發(fā)商開發(fā)web應(yīng)用的方式，從桌面的瀏覽器開始到移動(dòng)端的應(yīng)用，這種語言和標(biāo)準(zhǔn)都正在不斷的影響，并將持續(xù)影響著各種各樣的操作平臺。

這篇文章將向大家介紹一些最基本也非常必要的HTML技巧。

1. 新的文檔類型（Doctype）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

你還在使用上面這個(gè)既麻煩又難記的XHTML文檔類型嗎？如果還是這樣的話，現(xiàn)在該切換到新的HTML5文檔類型了。

<!DOCTYPE html>

只要這么簡單的15個(gè)字符就可以了。（注意：你的doctype的申明需要出現(xiàn)在你html文件的第一行。）

2. 圖形（Figure）元素

考慮用下面的代碼來標(biāo)記圖片？

<p>Image of Mars. </p>

很不幸，它不能用簡單、富有語義關(guān)聯(lián)的方式與圖形的標(biāo)題關(guān)聯(lián)，因?yàn)樗鼉H僅是用段落標(biāo)記以及圖片元素包裹著，而HTML5通過引進(jìn)<figure>元素，改進(jìn)了這一點(diǎn)。當(dāng)結(jié)合 <figcaption> 元素使用時(shí)，我們就可以將圖形標(biāo)題與圖形配對起來。代碼如下：

<p>This is an image of something interesting. </p>

</figcaption>

</figure>

3.布局

當(dāng)創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站，或讓現(xiàn)有的網(wǎng)站變成響應(yīng)式的，首先要關(guān)注的元素的布局。我在建立響應(yīng)式的網(wǎng)站，總是先創(chuàng)建一個(gè)非響應(yīng)的布局，頁面寬度固定大小。如果非響應(yīng)版本完成得非常不錯(cuò)，我再添加媒體查詢（Media Queries）和響應(yīng)式代碼。這種操作方式更容易實(shí)現(xiàn)響應(yīng)式特性，在同一時(shí)間專注于一個(gè)任務(wù)。

當(dāng)你已經(jīng)完成了無響應(yīng)的網(wǎng)站，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到<head>和</head>標(biāo)簽之間。這將設(shè)置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機(jī)的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶縮放頁面。

1.<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

2.<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3.<meta name="HandheldFriendly" content="true">

現(xiàn)在是時(shí)候添加一些媒體查詢了。根據(jù) W3C 網(wǎng)站，媒體查詢由媒體類型和零個(gè)或多個(gè)媒體查詢的條件表達(dá)式組成。通過使用媒體查詢，外觀呈現(xiàn)可以針對特定范圍內(nèi)的輸出設(shè)備，而不需要改變內(nèi)容本身。換句話說，媒體查詢讓您的網(wǎng)站在各種各種顯示器上看起來都很好，從小的智能手機(jī)到大的電腦屏幕等等。

媒體查詢?nèi)Q于你的網(wǎng)站布局，所以對我來說為您提供一個(gè)現(xiàn)成可以使用的代碼片段有點(diǎn)困難。但是，下面的代碼對于大多數(shù)網(wǎng)站都是一個(gè)很好的起點(diǎn)。在這個(gè)例子中，#primary 是主要內(nèi)容區(qū)域，#secondary 是側(cè)欄。

從代碼中你可以看到，我定義了兩種規(guī)格：首先有一個(gè)最大寬度為1060px，為平板電腦優(yōu)化的橫向顯示。#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。第二個(gè)規(guī)格是用于平板電腦和更小的屏幕尺寸。

由于智能手機(jī)的屏幕尺寸小，我決定給 #primary 設(shè)置100%的寬度，#secondary 也設(shè)置100%的寬度，他將在 #primary 下面。正如我已經(jīng)說過的，你可能必須要對這段代碼位進(jìn)行修改才能適應(yīng)您的網(wǎng)站的具體需求。

1./* Tablet Landscape */

2.@media screen and (max-width: 1060px) {

3. #primary { width:67%; }

4. #secondary { width:30%; margin-left:3%;}

5.}

6./* Tabled Portrait */

7.@media screen and (max-width: 768px) {

8. #primary { width:100%; }

9. #secondary { width:100%; margin:0; border:none; }

10.}

完成以后，讓我們看看你的布局是如何響應(yīng)的。要做到這一點(diǎn)，我用這 Matt Kersley 創(chuàng)建的一款非常的響應(yīng)式測試工具。

四字體

本教程的最后一步絕對非常重要，但往往被網(wǎng)站開發(fā)人員忽視——字體。到現(xiàn)在為止，大多數(shù)開發(fā)人員（包括我自己）使用像素來定義字體的大小。雖然像素在普通網(wǎng)站使用是OK的，但是對于響應(yīng)式網(wǎng)站來說應(yīng)該有響應(yīng)式的字體。事實(shí)上，一個(gè)響應(yīng)式的字體大小應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣它才可以適應(yīng)客戶端的屏幕。

CSS3 規(guī)范引入了一個(gè)新的單位叫 rem，和 em 類相似，但相對于 HTML 元素來說， rem 更易于使用。

rem 是相對于 HTML 元素的，不要忘了重置 HTML 的字體大?。?/p>

1.html { font-size:100%; }

完成后，您可以定義響應(yīng)式的字體大小，如下所示：

1.@media (min-width: 640px) { body {font-size:1rem;} }

2.@media (min-width:960px) { body {font-size:1.2rem;} }

3.@media (min-width:1100px) { body {font-size:1.5rem;} }

請注意，舊瀏覽器不支持 rem 單元，所以不要忘了實(shí)現(xiàn)一個(gè)替代。

　　這就是今天的所有內(nèi)容了，希望你會喜歡這個(gè)教程！

在線咨詢

上一篇：第42節(jié) Element元素節(jié)點(diǎn)-Javascrip
下一篇：塑料書皮如何選？開學(xué)必看！

您的項(xiàng)目需求

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