html怎么设置图片大小,小猿圈入门html5教程之利用canvas实现图片压缩方法

浏览:3290   发布时间: 2022年07月29日

前端入门——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 如何在网页中使用视频音频

html开发笔记15-图片标签-向网页添加图片 一、图片标签是用 单标签来定义: 二、代码演示

一、图片标签是用 <img> 单标签来定义:

作用是向网页中添加图片,并且img标签有多个可用参数可以添加。

二、代码演示<body><!--图片标签 --><img src="test.png"> <!--写法1:单这样写就可以引用图片了--><!--写法2:带有参数--><img src="test.png" alt="测试图片" title="测试" width="400" height="600"><!--src 属性 :引用图片的路径alt 属性 :正常不显示,只在找不到图片时显示title 属性:当鼠标悬停到图片上时,自动显示。width :图片的宽度,可以自定义(单位像素)height:图片的高度,可以自定义。--></body>

小猿圈入门html5教程之利用canvas实现图片压缩方法

现在学习前端你的小伙伴都在迷茫遇到问题,找不到老师怎么办?这些也是小猿圈web前端老师担心的,以后每天小猿圈都会为大家分享一些关于学习前端中的一些小问题,今天分享的是利用canvas实现图片压缩方法。

项目中做身份证识别时,需要传送图片的base64格式编码,但是手机拍摄的照片都太大了,转成base64简直可怕,因此找了一下解决办法。

涉及到的知识点

onchange事件是在上传完文件之后触发

使用files属性获取到上传的文件对象

readAsDataURL用于转换成base64编码

区分canvas的画布和绘画环境:

画布:对应代码中的cvs,可以设置画布width,height;

绘画环境:对应代码中的ctx,可以设置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>

<div>800×449,544KB</div>

<imgsrc=""alt="">

<hr>

<div>400×224,157KB</div>

<canvas></canvas>

<script>

//上传图片

functionloadImg(me){

letimg=document.querySelector('img');

letcvs=document.querySelector('canvas');

letfile=me.files[0];//获取到文件对象

//上传的图片大于500KB时才压缩

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

letreader=newFileReader();

reader.readAsDataURL(file);//转成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>

关于压缩后的图片大小

这里提供一个开箱即用的方法,baseStr是一个完整的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');

}

今天的知识点就分享到这里了,有需要的朋友欢迎点赞评论转发,想了解更多web前端开发内容的朋友可以关注小猿圈的每天的动态,会不定时更新很多更好的内容奉献给大家,希望对你的学习有所帮助。