手把手教你如何将图片“嵌入”网页中

原创 2017年01月03日 23:36:49

网页必不可少的组成元素是什么?我想所有人都知道是文字和图片。

那么如何向网页中添加图片?会HTMLCSS的同学肯定知道,利用<img>标签插入图片,为src属性指定图片的相对路径,然后将图片放置到那个路径上去就可以了,例如下面的这个简单的HTML代码:

<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

   <head>

       <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title> HTML内嵌图片教程</title>

   </head>

   <body>

       <img src="sea.png" width="800px"height="510px" alt="sea" />

   </body>

</html>

再加上一张好看的图片(sea.png):

手把手教你如何将图片“嵌入”网页中 - 远行的风 - 风的驿站

话不多说,下面我们来介绍如何将图片“嵌入”到HTML代码中,这样我们就不需要拷贝图片到指定路径下了,显示整张图片就只需要一个页面文件就可以了。

我们简单说下原理,我们知道,所有东西归根结底都是数据,图片也不例外,图片文件实际是由图片文件头,信息头(有的格式没有),图片数据,图片结束标识(有的格式没有)这些部分组成,在浏览器解析文件的时候,先到src指定的路径下将图片文件读取出来,然后按照图片头定义的文件压缩格式,对图片数据进行读取显示。所以我们可以直接将图片的内容进行编码然后存入HTML文件中即可。

HTML中支持base64编码的数据直接嵌入到网页中,这里提供一个网址,可以在线将文件内容转换为base64编码的数据,点击“choosefile”,然后点击“convertthe source data”,即可生成文件的base64编码数据。网址如下:

http://www.motobit.com/util/base64-decoder-encoder.asp

 

当然我们也可以手动编写一个小工具进行转码,C语言实现的base64编码方法如下:

char*base64_encode(char* in_str)

{

   int i=0;

   charbase64_table[]="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

   int curr_out=0;

   if(in_len>0)

   {

       while(i<in_len)

       {

           char a=in_str[i];

           char b=i+1>=in_len?0:in_str[i+1];

           char c=i+2>=in_len?0:in_str[i+2];

           if(i+2<in_len)          /*0*/

           {

               out_str[curr_out++]=base64_table[(a>>2)&(0x3f)];        //the first

               out_str[curr_out++]=base64_table[((a&0x03)<<4)+(b>>4)];   //the first and the second

               out_str[curr_out++]=base64_table[((b&0x0f)<<2)+(c>>6)];   //the second and the third

               out_str[curr_out++]=base64_table[c&0x3f];          //the third

           }

           else if(i+1<in_len)      /*2*/

           {

               out_str[curr_out++]=base64_table[(a>>2)&(0x3f)];   //thefirst

               out_str[curr_out++]=base64_table[((a&0x03)<<4)+(b>>4)]; //the first and the second

               out_str[curr_out++]=base64_table[(b&0x0f)<<2];    //the last low 4 bits of the second

               out_str[curr_out++]='=';   //fill with the '='

           }

           else                         /*1*/

           {

               out_str[curr_out++]=base64_table[(a>>2)&(0x3f)];  //the first

               out_str[curr_out++]=base64_table[(a&(0x03))<<4];  //the rest ofof the first

               out_str[curr_out++]='=';    //fill with  '=' in the lasttwo bits

               out_str[curr_out++]='=';

           }

           i+=3;

       }

       out_str[curr_out]='\0';

   }

   return out_str;

};

调用时将文件内容读入char*,然后作为函数参数传入,函数的返回值即为编码后的结果。

这里我们将限于篇幅,将图像缩小为30像素×18像素后,得到的编码如下(仍然很多):

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

 

然后,我们修改之前的HTML页面中的img标签如下:

<img src="data:image/png;base64, [这里把上面的base64编码替换进来(包括左右的中括号)]"width="30px" height="1px" alt="sea" />

然后保存,测试一下结果,发现图片已经嵌入到页面中了:

手把手教你如何将图片“嵌入”网页中 - 远行的风 - 风的驿站

以上就是嵌入图片的方法,我们看到,其实就是将图片的数据嵌入到了页面中,使用这种方法会显著增加HTML文件的大小,如果不是非常小的图片或者十分有必要这么做的情况下,我们尽量不要使用这种方式。

我们最后看一下“data:image/png;base64,”这个写法,这句表明我们嵌入的是png格式image文件,使用的是base64编码,那么你肯定猜到了,还有很多别的资源也能够被这样嵌入到页面中,具体格式在下面列出:

123application/vnd.lotus-1-2-3 

3gpvideo/3gpp 

aabapplication/x-authoware-bin 

aamapplication/x-authoware-map 

aasapplication/x-authoware-seg 

aiapplication/postscript 

aifaudio/x-aiff 

aifcaudio/x-aiff 

aiffaudio/x-aiff 

alsaudio/X-Alpha5 

amcapplication/x-mpeg 

aniapplication/octet-stream 

asctext/plain 

asdapplication/astound 

asfvideo/x-ms-asf 

asnapplication/astound 

aspapplication/x-asap 

asxvideo/x-ms-asf 

auaudio/basic 

avbapplication/octet-stream 

avivideo/x-msvideo 

awbaudio/amr-wb 

bcpioapplication/x-bcpio 

binapplication/octet-stream 

bldapplication/bld 

bld2application/bld2 

bmpapplication/x-MS-bmp 

bpkapplication/octet-stream 

bz2application/x-bzip2 

calimage/x-cals 

ccnapplication/x-cnc 

ccoapplication/x-cocoa 

cdfapplication/x-netcdf 

cgimagnus-internal/cgi 

chatapplication/x-chat 

classapplication/octet-stream 

clpapplication/x-msclip 

cmxapplication/x-cmx 

coapplication/x-cult3d-object 

codimage/cis-cod 

cpioapplication/x-cpio 

cptapplication/mac-compactpro 

crdapplication/x-mscardfile 

cshapplication/x-csh 

csmchemical/x-csml 

csmlchemical/x-csml 

css text/css 

curapplication/octet-stream 

dcmx-lml/x-evm 

dcrapplication/x-director 

dcximage/x-dcx 

dhtmltext/html 

dirapplication/x-director 

dllapplication/octet-stream 

dmgapplication/octet-stream 

dmsapplication/octet-stream 

docapplication/msword 

dotapplication/x-dot 

dviapplication/x-dvi 

dwfdrawing/x-dwf 

dwgapplication/x-autocad 

dxfapplication/x-autocad 

dxrapplication/x-director 

ebkapplication/x-expandedbook 

embchemical/x-embl-dl-nucleotide 

emblchemical/x-embl-dl-nucleotide 

epsapplication/postscript 

eriimage/x-eri 

esaudio/echospeech 

eslaudio/echospeech 

etcapplication/x-earthtime 

etxtext/x-setext 

evmx-lml/x-evm 

evyapplication/x-envoy 

exeapplication/octet-stream 

fh4image/x-freehand 

fh5image/x-freehand 

fhcimage/x-freehand 

fifimage/fif 

fmapplication/x-maker 

fpximage/x-fpx 

fvivideo/isivideo 

gauchemical/x-gaussian-input 

gcaapplication/x-gca-compressed 

gdbx-lml/x-gdb 

gifimage/gif 

gpsapplication/x-gps 

gtarapplication/x-gtar 

gzapplication/x-gzip 

hdfapplication/x-hdf 

hdmtext/x-hdml 

hdmltext/x-hdml 

hlpapplication/winhlp 

hqxapplication/mac-binhex40 

htmtext/html 

htmltext/html 

htstext/html 

icex-conference/x-cooltalk 

icoapplication/octet-stream 

iefimage/ief 

ifmimage/gif 

ifsimage/ifs 

imyaudio/melody 

insapplication/x-NET-Install 

ipsapplication/x-ipscript 

ipxapplication/x-ipix 

itaudio/x-mod 

itzaudio/x-mod 

ivri-world/i-vrml 

j2kimage/j2k 

jadtext/vnd.sun.j2me.app-descriptor 

jamapplication/x-jam 

jarapplication/java-archive 

jnlpapplication/x-java-jnlp-file 

jpeimage/jpeg 

jpegimage/jpeg 

jpgimage/jpeg 

jpzimage/jpeg 

jsapplication/x-javascript 

jwcapplication/jwc 

kjxapplication/x-kjx 

lakx-lml/x-lak 

latexapplication/x-latex 

lccapplication/fastman 

lclapplication/x-digitalloca 

lcrapplication/x-digitalloca 

lghapplication/lgh 

lhaapplication/octet-stream 

lmlx-lml/x-lml 

lmlpackx-lml/x-lmlpack 

lsfvideo/x-ms-asf 

lsxvideo/x-ms-asf 

lzhapplication/x-lzh 

m13application/x-msmediaview 

m14application/x-msmediaview 

m15audio/x-mod 

m3uaudio/x-mpegurl 

m3urlaudio/x-mpegurl 

ma1audio/ma1 

ma2audio/ma2 

ma3audio/ma3 

ma5audio/ma5 

manapplication/x-troff-man 

mapmagnus-internal/imagemap 

mbdapplication/mbedlet 

mctapplication/x-mascot 

mdbapplication/x-msaccess 

mdzaudio/x-mod 

meapplication/x-troff-me 

meltext/x-vmel 

miapplication/x-mif 

midaudio/midi 

midiaudio/midi 

mifapplication/x-mif 

milimage/x-cals 

mioaudio/x-mio 

mmfapplication/x-skt-lbs 

mngvideo/x-mng 

mnyapplication/x-msmoney 

mocapplication/x-mocha 

mochaapplication/x-mocha 

modaudio/x-mod 

mofapplication/x-yumekara 

molchemical/x-mdl-molfile 

mopchemical/x-mopac-input 

movvideo/quicktime 

movievideo/x-sgi-movie 

mp2audio/x-mpeg 

mp3audio/x-mpeg 

mp4video/mp4 

mpcapplication/vnd.mpohun.certificate 

mpevideo/mpeg 

mpegvideo/mpeg 

mpgvideo/mpeg 

mpg4video/mp4 

mpgaaudio/mpeg 

mpnapplication/vnd.mophun.application 

mppapplication/vnd.ms-project 

mpsapplication/x-mapserver 

mrltext/x-mrml 

mrmapplication/x-mrm 

msapplication/x-troff-ms 

mtsapplication/metastream 

mtxapplication/metastream 

mtzapplication/metastream 

mzvapplication/metastream 

narapplication/zip 

nbmpimage/nbmp 

ncapplication/x-netcdf 

ndbx-lml/x-ndb 

ndwnapplication/ndwn 

nifapplication/x-nif 

nmzapplication/x-scream 

nokia-op-logoimage/vnd.nok-oplogo-color 

npxapplication/x-netfpx 

nsndaudio/nsnd 

nvaapplication/x-neva1 

odaapplication/oda 

oomapplication/x-AtlasMate-Plugin 

pacaudio/x-pac 

paeaudio/x-epac 

panapplication/x-pan 

pbmimage/x-portable-bitmap 

pcximage/x-pcx 

pdaimage/x-pda 

pdbchemical/x-pdb 

pdfapplication/pdf 

pfrapplication/font-tdpfr 

pgmimage/x-portable-graymap 

pictimage/x-pict 

pmapplication/x-perl 

pmdapplication/x-pmd 

pngimage/png 

pnmimage/x-portable-anymap 

pnzimage/png 

potapplication/vnd.ms-powerpoint 

ppmimage/x-portable-pixmap 

ppsapplication/vnd.ms-powerpoint 

pptapplication/vnd.ms-powerpoint 

pqfapplication/x-cprplayer 

pqiapplication/cprplayer 

prcapplication/x-prc 

proxyapplication/x-ns-proxy-autoconfig 

psapplication/postscript 

ptlkapplication/listenup 

pubapplication/x-mspublisher 

pvxvideo/x-pv-pvx 

qcpaudio/vnd.qcelp 

qtvideo/quicktime 

qtiimage/x-quicktime 

qtifimage/x-quicktime 

r3ttext/vnd.rn-realtext3d 

raaudio/x-pn-realaudio 

ramaudio/x-pn-realaudio 

rarapplication/x-rar-compressed 

rasimage/x-cmu-raster 

rdfapplication/rdf+xml 

rfimage/vnd.rn-realflash 

rgbimage/x-rgb 

rlfapplication/x-richlink 

rmaudio/x-pn-realaudio 

rmfaudio/x-rmf 

rmmaudio/x-pn-realaudio 

rmvbaudio/x-pn-realaudio 

rnxapplication/vnd.rn-realplayer 

roffapplication/x-troff 

rpimage/vnd.rn-realpix 

rpmaudio/x-pn-realaudio-plugin 

rttext/vnd.rn-realtext 

rtex-lml/x-gps 

rtfapplication/rtf 

rtgapplication/metastream 

rtxtext/richtext 

rvvideo/vnd.rn-realvideo 

rwcapplication/x-rogerwilco 

s3maudio/x-mod 

s3zaudio/x-mod 

scaapplication/x-supercard 

scdapplication/x-msschedule 

sdfapplication/e-score 

seaapplication/x-stuffit 

sgmtext/x-sgml 

sgmltext/x-sgml 

shapplication/x-sh 

sharapplication/x-shar 

shtmlmagnus-internal/parsed-html 

shwapplication/presentations 

si6image/si6 

si7image/vnd.stiwap.sis 

si9image/vnd.lgtwap.sis 

sisapplication/vnd.symbian.install 

sitapplication/x-stuffit 

skdapplication/x-Koan 

skmapplication/x-Koan 

skpapplication/x-Koan 

sktapplication/x-Koan 

slcapplication/x-salsa 

smdaudio/x-smd 

smiapplication/smil 

smilapplication/smil 

smpapplication/studiom 

smzaudio/x-smd 

sndaudio/basic 

spctext/x-speech 

splapplication/futuresplash 

sprapplication/x-sprite 

spriteapplication/x-sprite 

sptapplication/x-spt 

srcapplication/x-wais-source 

stkapplication/hyperstudio 

stmaudio/x-mod 

sv4cpioapplication/x-sv4cpio 

sv4crcapplication/x-sv4crc 

svfimage/vnd 

svgimage/svg-xml 

svhimage/svh 

svrx-world/x-svr 

swfapplication/x-shockwave-flash 

swflapplication/x-shockwave-flash 

tapplication/x-troff 

tadapplication/octet-stream 

talktext/x-speech 

tarapplication/x-tar 

tazapplication/x-tar 

tbpapplication/x-timbuktu 

tbtapplication/x-timbuktu 

tclapplication/x-tcl 

texapplication/x-tex 

texiapplication/x-texinfo 

texinfoapplication/x-texinfo 

tgzapplication/x-tar 

thmapplication/vnd.eri.thm 

tifimage/tiff 

tiffimage/tiff 

tkiapplication/x-tkined 

tkinedapplication/x-tkined 

tocapplication/toc 

toyimage/toy 

trapplication/x-troff 

trkx-lml/x-gps 

trmapplication/x-msterminal 

tsiaudio/tsplayer 

tspapplication/dsptype 

tsvtext/tab-separated-values 

tsvtext/tab-separated-values 

ttfapplication/octet-stream 

ttzapplication/t-time 

txttext/plain 

ultaudio/x-mod 

ustarapplication/x-ustar 

uuapplication/x-uuencode 

uueapplication/x-uuencode 

vcdapplication/x-cdlink 

vcftext/x-vcard 

vdovideo/vdo 

vibaudio/vib 

vivvideo/vivo 

vivovideo/vivo 

vmdapplication/vocaltec-media-desc 

vmfapplication/vocaltec-media-file 

vmiapplication/x-dreamcast-vms-info 

vmsapplication/x-dreamcast-vms 

voxaudio/voxware 

vqeaudio/x-twinvq-plugin 

vqfaudio/x-twinvq 

vqlaudio/x-twinvq 

vrex-world/x-vream 

vrmlx-world/x-vrml 

vrtx-world/x-vrt 

vrwx-world/x-vream 

vtsworkbook/formulaone 

wavaudio/x-wav 

waxaudio/x-ms-wax 

wbmpimage/vnd.wap.wbmp 

webapplication/vnd.xara 

wiimage/wavelet 

wisapplication/x-InstallShield 

wmvideo/x-ms-wm 

wmaaudio/x-ms-wma 

wmdapplication/x-ms-wmd 

wmfapplication/x-msmetafile 

wmltext/vnd.wap.wml 

wmlcapplication/vnd.wap.wmlc 

wmlstext/vnd.wap.wmlscript 

wmlscapplication/vnd.wap.wmlscriptc 

wmlscripttext/vnd.wap.wmlscript 

wmvaudio/x-ms-wmv 

wmxvideo/x-ms-wmx 

wmzapplication/x-ms-wmz 

wpngimage/x-up-wpng 

wptx-lml/x-gps 

wriapplication/x-mswrite 

wrlx-world/x-vrml 

wrzx-world/x-vrml 

wstext/vnd.wap.wmlscript 

wscapplication/vnd.wap.wmlscriptc 

wvvideo/wavelet 

wvxvideo/x-ms-wvx 

wxlapplication/x-wxl 

x-gzipapplication/x-gzip 

xarapplication/vnd.xara 

xbmimage/x-xbitmap 

xdmapplication/x-xdma 

xdmaapplication/x-xdma 

xdwapplication/vnd.fujixerox.docuworks 

xhtapplication/xhtml+xml 

xhtmapplication/xhtml+xml 

xhtmlapplication/xhtml+xml 

xlaapplication/vnd.ms-excel 

xlcapplication/vnd.ms-excel 

xllapplication/x-excel 

xlmapplication/vnd.ms-excel 

xlsapplication/vnd.ms-excel 

xltapplication/vnd.ms-excel 

xlwapplication/vnd.ms-excel 

xmaudio/x-mod 

xml text/xml 

xmzaudio/x-mod 

xpiapplication/x-xpinstall 

xpmimage/x-xpixmap 

xsittext/xml 

xsl text/xml 

xul text/xul 

xwdimage/x-xwindowdump 

xyzchemical/x-pdb 

yz1application/x-yz1 

zapplication/x-compress 

zacapplication/x-zaurus-zac 

zipapplication/zip

版权声明:本文为博主原创文章,未经博主允许不得转载。

Linux下的raw Socket(原始套接字)编程

前言 本文所述代码托管在https://github.com/Wuchenwcf/MyCode/blob/master/C%2B%2B/Linux/rawSocketTest.cpp 简介 最近项目需...

java编程华容道智力游戏

华容道java代码: import java.awt.*; import java.awt.event.*; public class MoveExample {  public stati...

如何将本地图片嵌入网页?

因为经常会用Mardown写作,图片一般是用本地图片,但是导出html的时候,图片路径还是连接到本地的图片,如果把这个网页文件放到其他地方,就找不到图片了,所以最后显示不出来。后来得知可以把图片以ba...
  • onlyshi
  • onlyshi
  • 2017年10月31日 20:52
  • 105

【MFC】手把手教你如何将获取的字符串转换为数组

简单步骤 开发环境 VC++6.0 工程创建操作 界面设计 功能实现代码 void CBlogDlg::Oninout() { // TODO: Add you...

手把手教你如何将一个拥有巨大市场潜力的超前产品给做死

Wattage是一个硬件创造平台产品,让就算不懂电子和生产的人也可以在该平台上可视化的进行硬件产品设计创新,然后该平台会将用户设计好的虚拟硬件产品转换成可以真正进行生产的硬件模型,然后通过激光和3D打...

手把手教你如何将tomcat设置成开机自启动后台服务

Apache Tomcat开机后台启动 | 浏览:9960 | 更新:2012-04-22 08:07 1 2 3 4 5 6 ...

手把手教你:Ubuntu14+apache2+django1.7+python2.7下网页/网站部署

本人亲自尝试了网上众多的部署网页/网站方法,绝大多数都未能试验成功,这次的项目光部署这块遇到了很多问题,大概耗费了我一个星期。 本着:王道论坛中的赠人玫瑰,手留余香的精神。我把自己一路所走的历程发布出...

安卓手把手教你结合阿里云OSS存储实现视频(音频,图片)的上传与下载

首先,明白阿里云OSS是个什么鬼 阿里云对象存储(Object Storage Service,简称OSS),是阿里云对外提供的海量,安全,低成本,高可靠的云存储服务。用户可以通过调用API...

手把手教你快速拿到iOS应用中所有图片资源

最近闲来无事, 突然想到一个有趣的技能,我们看别人高仿一些项目,奇怪图片资源和其他资源文件是怎么拿到的,今天,我就一步一步教大家拿到一个iOS应用里面的所有资源.说到这里,就会提到一个常识: Ima...
  • Levilly
  • Levilly
  • 2016年08月04日 16:21
  • 756
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手把手教你如何将图片“嵌入”网页中
举报原因:
原因补充:

(最多只允许输入30个字)