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

維網和其它網絡類型最大的區別就是它在網頁上可呈現豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。

一、圖片格式

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

1、gif格式

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

2、jpg或jpeg格式

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

3、png格式

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

二、使用圖片

網頁中通過<img>標簽插入圖片，語法如下：

<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>請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區別。</p>
</body>
</html>

效果如下：

替換文本屬性（Alt）

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

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

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

圖像寬度和高度屬性

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

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

圖片超鏈接

如下代碼，在網頁中對一個圖片進行超鏈接設置，點擊這張圖片就會跳轉到其它頁面。

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

創建圖像熱區鏈接

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

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

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點擊太陽或其他行星，注意變化：</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 這里。

可以看到鼠標在圖片上點擊小行星會打開對應的圖片。

到此網頁中使用圖片已經大體介紹了，自己親手寫下，會加深印象，感謝關注。

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

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

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

在學習html之前首先你要明確的幾點是：

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

2. 你有沒有系統的學習規劃，規劃好每天學什么、學多長時間。

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

下面小編給大家提供一個曾經學習過的HTML視頻教程，希望可以幫助到大家，此視頻教程主要講解了HTML基礎語法，內容主要包括：HTML概述、W3C概述、B/S架構系統原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點。通過該視頻的學習之后，可以開發基本的網頁，并且可以看懂別人編寫的HTML頁面。

課程學習目錄

1.HTML視頻教程:課程內容概述

2.HTML視頻教程:BS結構介紹

3.HTML視頻教程:軟件環境準備

4.HTML視頻教程:HTML概述

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

6.HTML視頻教程:HTML的基本標簽

7.HTML視頻教程:HTML的實體符號

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

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

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

11.HTML視頻教程:thead tbody tfoot

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

13.HTML視頻教程:HTML圖片img標簽

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

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

16.HTML視頻教程:HTML列表

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

18.HTML視頻教程:用戶注冊表單的實現

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

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

完整目錄可以關注動力節點Java視頻教程

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

OM to Image

dom-to-image是一個js庫，可以將任意dom節點轉換為矢量(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');

用法

所有高階函數都接受DOM節點和渲染選項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數組的形式獲取原始像素數據，每4個數組元素表示一個像素的RGBA數據：

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參數

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

原理

dom-to-image使用SVG的一個特性，它允許在標記中包含任意HTML內容。

遞歸地克隆原始DOM節點
計算節點和每個子節點的樣式，并將其復制到相應的克隆創建偽元素，因為它們不是以任何方式克隆的
嵌入web字體查找所有@font face聲明的web字體解析文件URL，下載相應文件 base64編碼的內聯作為data：URLs 將所有已處理的CSS放入中，然后將其附加到克隆
嵌入圖片在嵌入圖片URL 使用backgroundCSS屬性的圖片，方法類似于字體
將克隆的節點序列化為XML
將XML包裝到標記中，然后包裝到SVG中，然后使其成為data URL
或者，要以Uint8Array的形式獲取PNG內容或原始像素數據，可以創建一個以SVG為源的圖像元素，并將其呈現在已經創建的canvas上，從canvas讀取內容

部分源碼分析

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設置默認options選項
domtoimage的核心api:

toSvg
toPng
toJpeg
toBlob
toPixelData

例：toJpeg：將draw函數返回的canvas實例，使用canvas的toDataURL方法生成jpeg圖片。toSvg函數將遞歸地克隆原始DOM節點, 將克隆的節點序列化為XML,將XML包裝到標記中，然后包裝到SVG中，然后使其轉成dataURL。

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

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

在線咨詢

上一篇：免費的商用字體，99%的設計師都不知道！（中文）
下一篇：認識 HTML5

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商