前端入门-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小时内与您取得联系。

整合营销服务商