前端入門-html 中如何使用圖片

維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁上可呈現(xiàn)豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。

一、圖片格式

網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。

1、gif格式

gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會造成任何品質(zhì)的損失，且壓縮率高，支持動畫效果，很適合互聯(lián)網(wǎng)平臺，但是它只支持256種顏色。

2、jpg或jpeg格式

以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會對一些圖像數(shù)據(jù)造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來差異的。損失數(shù)據(jù)越多，圖片就越不清晰。

3、png格式

png是一種非破壞性的網(wǎng)頁圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點(diǎn)，還支持48 bit的色彩，跨平臺的圖像亮度控制，更多層的透明度設(shè)置。

二、使用圖片

網(wǎng)頁中通過<img>標(biāo)簽插入圖片，語法如下：

<img src="圖片路徑" alt="替換文本" />

具體示例：

<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動畫圖像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區(qū)別。</p>
</body>
</html>

效果如下：

替換文本屬性（Alt）

alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。

<img src="boat.gif" alt="Big Boat">

當(dāng)瀏覽器無法載入圖像時，替換文本屬性可告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

圖像寬度和高度屬性

如下代碼，在網(wǎng)頁中插入一個寬度和高度都是300像素的圖片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

圖片超鏈接

如下代碼，在網(wǎng)頁中對一個圖片進(jìn)行超鏈接設(shè)置，點(diǎn)擊這張圖片就會跳轉(zhuǎn)到其它頁面。

<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>

創(chuàng)建圖像熱區(qū)鏈接

除了對整個圖片進(jìn)行超鏈接設(shè)置外，還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置，比如一張地圖中給每個省份圖形進(jìn)行超鏈接。

圖像熱區(qū)鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個熱區(qū)點(diǎn)擊區(qū)域形狀、大小、坐標(biāo)等。
area標(biāo)簽的 shape 屬性有三種，rect 方形，circle 圓形，poly 多邊形。coords 屬性定義坐標(biāo)點(diǎn)位置，相對于圖片左上角位置。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點(diǎn)擊太陽或其他行星，注意變化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>

效果可參考 https://www.w3cschool.cn/html5/html5-img.html 這里。

可以看到鼠標(biāo)在圖片上點(diǎn)擊小行星會打開對應(yīng)的圖片。

到此網(wǎng)頁中使用圖片已經(jīng)大體介紹了，自己親手寫下，會加深印象，感謝關(guān)注。

上篇：前端入門——html 超鏈接

下篇：前端入門——html 如何在網(wǎng)頁中使用視頻音頻

tml的自學(xué)剛開始的時候是比較難的，因?yàn)閔tml的專業(yè)程度本身就不簡單，而自學(xué)也是一件非常煎熬的事情，但是為了掌握一項生存技能，你必須學(xué)會。

在學(xué)習(xí)html之前首先你要明確的幾點(diǎn)是：

1. 是否明確將來做什么工作，需要掌握哪些技能，不要別人學(xué)你也跟著學(xué)，盲目跟風(fēng)

2. 你有沒有系統(tǒng)的學(xué)習(xí)規(guī)劃，規(guī)劃好每天學(xué)什么、學(xué)多長時間。

3. 學(xué)習(xí)方式要選對，很多人在學(xué)習(xí)html的時候就是學(xué)習(xí)方式選錯了，最后的結(jié)果就是學(xué)著學(xué)著就放棄了，學(xué)習(xí)過程種一定要找到學(xué)習(xí)技巧，不會的可以多問問別人，不要自己瞎琢磨，最后什么也沒琢磨出來。

下面小編給大家提供一個曾經(jīng)學(xué)習(xí)過的HTML視頻教程，希望可以幫助到大家，此視頻教程主要講解了HTML基礎(chǔ)語法，內(nèi)容主要包括：HTML概述、W3C概述、B/S架構(gòu)系統(tǒng)原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點(diǎn)。通過該視頻的學(xué)習(xí)之后，可以開發(fā)基本的網(wǎng)頁，并且可以看懂別人編寫的HTML頁面。

課程學(xué)習(xí)目錄

1.HTML視頻教程:課程內(nèi)容概述

2.HTML視頻教程:BS結(jié)構(gòu)介紹

3.HTML視頻教程:軟件環(huán)境準(zhǔn)備

4.HTML視頻教程:HTML概述

5.HTML視頻教程:我的第一個HTML

6.HTML視頻教程:HTML的基本標(biāo)簽

7.HTML視頻教程:HTML的實(shí)體符號

8.HTML視頻教程:HTML的表格

9.HTML視頻教程:HTML的單元格合并1

10.HTML視頻教程:HTML的單元格合并2

11.HTML視頻教程:thead tbody tfoot

12.HTML視頻教程:背景色和背景圖片

13.HTML視頻教程:HTML圖片img標(biāo)簽

14.HTML視頻教程:HTML超鏈接

15.HTML視頻教程:超鏈接的作用-request和response的概念

16.HTML視頻教程:HTML列表

17.HTML視頻教程:form表單初步

18.HTML視頻教程:用戶注冊表單的實(shí)現(xiàn)

19.HTML視頻教程:下拉列表支持多選

20.HTML視頻教程:form的file控件

完整目錄可以關(guān)注動力節(jié)點(diǎn)Java視頻教程

HTML視頻教程：https://www.ixigua.com/6834413404204040715

OM to Image

dom-to-image是一個js庫，可以將任意dom節(jié)點(diǎn)轉(zhuǎn)換為矢量(SVG)或光柵(PNG或JPEG)圖像。

安裝

npm install dom-to-image -S

加載

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

用法

所有高階函數(shù)都接受DOM節(jié)點(diǎn)和渲染選項options ，并返回promises。

獲取PNG圖像base64編碼的data URL：

<div id="my-node"></div>

var node = document.getElementById('my-node');
// options 可不傳
var options = {}  
domtoimage.toPng(node, options)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

獲取圖像blob：

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) { 
        console.log('blob', blob)
    });

獲取JPEG圖像base64編碼的data URL并下載：

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
});

獲取SVGdata URL，但篩選出所有元素：

function filter (node) {
    return (node.tagName !== 'i');
}
 
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
});

以uint8數(shù)組的形式獲取原始像素數(shù)據(jù)，每4個數(shù)組元素表示一個像素的RGBA數(shù)據(jù)：

var node = document.getElementById('my-node');
 
domtoimage.toPixelData(node)
    .then(function (pixels) {
        for (var y = 0; y < node.scrollHeight; ++y) {
          for (var x = 0; x < node.scrollWidth; ++x) {
            pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          }
        }
    });

options參數(shù)

Name	類型	Default	Description
filter	Function	——	以DOM節(jié)點(diǎn)為參數(shù)的函數(shù)。如果傳遞的節(jié)點(diǎn)應(yīng)包含在輸出中，則應(yīng)返回true(排除節(jié)點(diǎn)意味著也排除其子節(jié)點(diǎn))
bgcolor	String	——	背景色的字符串值，任何有效的CSS顏色值。
height	Number	——	渲染前應(yīng)用于節(jié)點(diǎn)的高度（以像素為單位）。
width	Number	——	渲染前應(yīng)用于節(jié)點(diǎn)的寬度（以像素為單位）。
style	Object	——	object對象，其屬性在渲染之前要復(fù)制到節(jié)點(diǎn)的樣式中。
quality	Number	1.0	介于0和1之間的數(shù)字，表示JPEG圖像的圖像質(zhì)量(例如0.92=>92%)。默認(rèn)值為1.0（100%）
cacheBust	Boolean	false	設(shè)置為true可將當(dāng)前時間作為查詢字符串附加到URL請求以啟用清除緩存。
imagePlaceholder	Boolean	undefined	獲取圖片失敗時使用圖片的數(shù)據(jù)URL作為占位符。默認(rèn)為未定義，并將在失敗的圖像上引發(fā)錯誤。

原理

dom-to-image使用SVG的一個特性，它允許在標(biāo)記中包含任意HTML內(nèi)容。

遞歸地克隆原始DOM節(jié)點(diǎn)
計算節(jié)點(diǎn)和每個子節(jié)點(diǎn)的樣式，并將其復(fù)制到相應(yīng)的克隆創(chuàng)建偽元素，因?yàn)樗鼈儾皇且匀魏畏绞娇寺〉?/li>
嵌入web字體查找所有@font face聲明的web字體解析文件URL，下載相應(yīng)文件 base64編碼的內(nèi)聯(lián)作為data：URLs 將所有已處理的CSS放入中，然后將其附加到克隆
嵌入圖片在嵌入圖片URL 使用backgroundCSS屬性的圖片，方法類似于字體
將克隆的節(jié)點(diǎn)序列化為XML
將XML包裝到標(biāo)記中，然后包裝到SVG中，然后使其成為data URL
或者，要以Uint8Array的形式獲取PNG內(nèi)容或原始像素數(shù)據(jù)，可以創(chuàng)建一個以SVG為源的圖像元素，并將其呈現(xiàn)在已經(jīng)創(chuàng)建的canvas上，從canvas讀取內(nèi)容

部分源碼分析

dom-to-image.js

// Default impl options
var defaultOptions = {
    // Default is to fail on error, no placeholder
    imagePlaceholder: undefined,
    // Default cache bust is false, it will use the cache
    cacheBust: false
};

var domtoimage = {
    toSvg: toSvg,
    toPng: toPng,
    toJpeg: toJpeg,
    toBlob: toBlob,
    toPixelData: toPixelData,
    impl: {
        fontFaces: fontFaces,
        images: images,
        util: util,
        inliner: inliner,
        options: {}
    }
};

if (typeof module !== 'undefined')
    module.exports = domtoimage;
else
    global.domtoimage = domtoimage;

defaultOptions設(shè)置默認(rèn)options選項
domtoimage的核心api:

toSvg
toPng
toJpeg
toBlob
toPixelData

例：toJpeg：將draw函數(shù)返回的canvas實(shí)例，使用canvas的toDataURL方法生成jpeg圖片。toSvg函數(shù)將遞歸地克隆原始DOM節(jié)點(diǎn), 將克隆的節(jié)點(diǎn)序列化為XML,將XML包裝到標(biāo)記中，然后包裝到SVG中，然后使其轉(zhuǎn)成dataURL。

function toJpeg(node, options) {
   options = options || {};
   return draw(node, options)
       .then(function (canvas) {
           return canvas.toDataURL('image/jpeg', options.quality || 1.0);
       });
}
復(fù)制代碼

function draw(domNode, options) {
    return toSvg(domNode, options)
        .then(util.makeImage)
        .then(util.delay(100))
        .then(function (image) {
            var canvas = newCanvas(domNode);
            canvas.getContext('2d').drawImage(image, 0, 0);
            return canvas;
        });

    function newCanvas(domNode) {
        var canvas = document.createElement('canvas');
        canvas.width = options.width || util.width(domNode);
        canvas.height = options.height || util.height(domNode);

        if (options.bgcolor) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = options.bgcolor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        return canvas;
    }
}

function toSvg(node, options) {
    options = options || {};
    copyOptions(options);
    return Promise.resolve(node)
        .then(function (node) {
            return cloneNode(node, options.filter, true);
        })
        .then(embedFonts)
        .then(inlineImages)
        .then(applyOptions)
        .then(function (clone) {
            return makeSvgDataUri(clone,
                options.width || util.width(node),
                options.height || util.height(node)
            );
        });

    function applyOptions(clone) {
        if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;

        if (options.width) clone.style.width = options.width + 'px';
        if (options.height) clone.style.height = options.height + 'px';

        if (options.style)
            Object.keys(options.style).forEach(function (property) {
                clone.style[property] = options.style[property];
            });

        return clone;
    }
}

作者：知其
https://juejin.cn/post/6988045156473634852

在線咨詢

上一篇：免費(fèi)的商用字體，99%的設(shè)計師都不知道！（中文）
下一篇：認(rèn)識 HTML5