url(data:image/png;base64,R0**)

url( data:image/png;base64,R0 **)

이른바'데이터'유형의 Url 형식은 RFC2397에서 제기한 것으로 일부'작은'데이터에 대해 외부 파일에서 불러오는 것이 아니라 웹 페이지에 직접 삽입할 수 있도록 한다.예를 들어img이라는 태그에 대해 이 그림이 아주 작고 한 점만 있어도 다른 외부 그림 파일, 예를 들어gif 파일에서 읽어야 한다. 만약에 브라우저가 데이터 형식의 Url 형식을 실현하면 이 파일은 페이지 문서 내부에서 직접 읽을 수 있다.
데이터 유형의 Url 형식은 1998년에 제기되었는데 지금까지Firfox, Opera, Safari, Konqueror 등 브라우저는 모두 지원했지만 IE는 7.0 버전까지 지원하지 않았다. IE가 지원하지 않는 것이 너무 많고 이것도 나쁘지 않다.(

작은 예

다음 html 코드는 데이터 형식 Url을 지원하는 브라우저에서 실행할 수 있습니다. 예를 들어 Firefox입니다.실행하면 파란색 그라데이션 베이스의 제목이 표시됩니다.

 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" >
<head>
<styletype="text/css">；
.title { 
background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);
background-repeat:repeat-x;
height:28px;
line-height: 28px;
text-align:center;
}
</style>
</head>
<body>
<divclass="title">Hello, world!</div>
</body>
</html>

이 점차적으로 변하는 파란색 바탕색은 실제로는 1x28의 작은 그림으로 가로로 반복(repeat-x)을 통해 형성된 것이다.이 그림은 매우 작지만 104바이트로 html이나 css 파일에 직접 삽입하는 것이 적합하다.
데이터 형식의 Url의 가장 직접적인 장점은 이러한 Url은 원래 새로운 인터넷 방문을 일으킬 수 있다는 것이다. 왜냐하면 그곳은 웹 페이지의 주소이기 때문에 지금은 새로운 인터넷 방문이 없을 것이다. 왜냐하면 지금은 여기가 웹 페이지의 내용이기 때문이다.이렇게 하면 서버의 부하를 줄일 수 있으며, 물론 현재 웹 페이지의 크기도 증가시킬 수 있다.그래서'소형'데이터에 특히 좋다.
데이터 유형 Url 형식은 Url인 이상 브라우저의 주소 표시줄에 직접 입력할 수도 있습니다.

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>

브라우저에 위의 Url을 입력하면 굵은 "Hello, World!"를 얻을 수 있습니다.즉, 4데이터: 뒤의 데이터는 웹 페이지의 주소가 아닌 웹 페이지의 내용으로 직접 사용됩니다.

간단하게 말하자면 데이터 유형의 Url은 대체로 다음과 같은 몇 가지 형식이 있다.

data:,< >
data:text/plain,< >
data:text/html,<HTML >
data:text/html;base64,<base64 HTML >
data:text/css,<CSS >
data:text/css;base64,<base64 CSS >
data:text/javascript,<Javascript >
data:text/javascript;base64,<base64 Javascript >
data:image/gif;base64,base64 gif 
data:image/png;base64,base64 png 
data:image/jpeg;base64,base64 jpeg 
data:image/x-icon;base64,base64 icon

Url은 텍스트 기반 프로토콜이기 때문에gif/png/jpeg 이 2진법은base64로 인코딩해야 합니다.베이스64를 도입하면 임의의 데이터 형식을 지원할 수 있다는 얘기다.다음은 png 그림의 예입니다. 브라우저에 Mozilla 아이콘을 표시합니다.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg

데이터 형식 Url의 다양한 응용 예

Html의 Img 객체에서 사용할 수 있습니다. 예를 들어,

<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />

Css의 백그라운드-image 속성에서 사용할 수 있습니다. 예를 들어,

div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}

Html의 Css 링크에서 사용할 수 있습니다. 예를 들면 다음과 같습니다.

<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

Html의 Javascript 링크에서 사용할 수 있습니다. 예를 들어,

<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

RFC에서 전체 구문은 다음과 같이 정의됩니다.

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value

urlchar는 일반 url에서 허용하는 문자를 가리키는데 일부 문자는 뜻을 바꿔야 한다. 예를 들어'='는'%3D'로 뜻을 바꿔야 하는데 내가 테스트해 보니 적어도 Firefox에서는 뜻을 바꾸지 않아도 된다.
parameter는 미디어 type에 대한 속성을 확장할 수 있습니다. 흔히 볼 수 있는 것은charset입니다. 인코딩 형식을 정의하는 데 사용되며, 여러 언어에서 필요합니다.예컨대 아래의 예.

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

이 예는'안녕하세요, 중국어!'를 나타낼 것이다.만약 charset 부분을 없애면, 난코드가 나타날 것이다. 왜냐하면 나는 UTF-8 인코딩을 사용하기 때문이다.
Firefox에는 데이터 형식 Url의 테스트 페이지가 있습니다. 다양한 형식의 데이터 형식 Url의 테스트 Url과 테스트 결과 설명이 열거되어 있습니다.
base64 인코딩과 내용의 은밀한 이진 데이터를 Base64로 바꾸는 것은 어렵지 않다. 예를 들어 Total Commander가 이런 기능을 가지고 있다.온라인 자원도 있고,
http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
일부 온라인 변환은base64의 "="을%3D로 변환하는데, 이것은Url에서 "="과 같고 변환하지 않아도 문제없습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

ssh를 통해 이미지 데이터와 같은 바이너리를 서버로 보냅니다.

ssh로부터 웹 컨텐츠 등을 편집하고 있을 때, 약간의 화상을 서버상에 보내고 싶을 때가 있다. 또 하나 콘솔을 열어 거기에서 scp하거나 전송용의 어플리케이션을 기동하거나 해도 괜찮지만, 괜찮다. 몇 대의 서버를 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

url(data:image/png;base64,R0**)