データURIスキームの詳細説明と使用例と画像 Base64エンコード実装方法_html5チュートリアルスキル-H5 チュートリアル-php.cn

1. データ URI スキームの概要

データ URI スキームは RFC2397 で定義されています。その目的は、外部ファイルからロードする必要がないように、いくつかの小さなデータを Web ページに直接埋め込むことです。たとえば、上の文字列は実際には小さな画像です。これらの文字をコピーして Firefox のアドレスバーに貼り付け、そこに移動すると、1X36 の白とグレーの PNG 画像が表示されます。
上記のData URIにおいて、dataはデータを取得するためのプロトコル名、image/pngはデータ型名、base64はデータのエンコード方式、カンマ以降は画像のbase64エンコードデータです。 /png ファイル。
おそらく、一部の Web ページでは、画像の src または css 背景画像 URL が一般的なオンライン画像リンクではなく、次のような大きな文字列であることにお気付きかと思います:

コードをコピーします

コードは次のとおりです:

data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a 5zfn9/// / wAAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK MEVQoKP04XKJqJBj /DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v2V /e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs UjZWPmYbUlpPOLbZds1YeU3mjj5OWObF1565Pg7nq Qm uzz5PT2m6I3ykXPyzf8 fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKVe FIJ jUdgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4JK8WpnheRA GN4wuCWhbxaC81I03bvfcSNf1SS pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77 IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5N UT yTkoC/0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g1 4s2bZ IZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK 5hjpNr2fWmWmWX A3 2jrEFzJL5QAIAOw==

これは何ですか?これは、スクリプトハウスが今日紹介するデータ URI スキームです。

現在、データ URI スキームでサポートされているタイプは次のとおりです:

コードをコピー

コードは次のとおりです

データ:、テキストデータ
データ:text/plain、テキストデータ
データ:text/html、HTML コード
データ:text/html;エンコードされた HTML コード
データ:text/css,CSS コード
データ:text/css;base64,base64 エンコードされた CSS コード
データ:text/javascript,Javascript コード
データ: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 でエンコードされたアイコン画像データ
base64 簡単に言うと、一部の 8 ビットデータを標準 ASCII 文字に変換し、PHP 関数 Base64_encode() で使用できます。エンコードを実行します。

現在、IE8、Firefox、Chrome、Opera ブラウザーはすべて、この小さなファイルの埋め込みをサポートしています。 IE7 以前のバージョンでは、データ URI スキームとの互換性の問題は MHTML を使用することで解決できます。

例として

Web ページ上の画像は次のように表示できます:

コードをコピーします

コードは次のとおりです:

も使用できます。次のように表示されます:

コードをコピーします

コードは次のとおりです:

我们画像ファイルの内容を HTML 文書に直接書き込みます。これは良いことです、节省了一 HTTP 请要求利用得

二、図片base64コードの実行方法例

2.1 JS 🎜 >function readFile(){

var file = this.files[0];
if(!/image/w /.test(file.type)){
alert("请确保)文例は画像类型");

return false;

} var Reader = new FileReader(); Reader.readAsDataURL(file); Reader.onload = function(e){ result.innerHTML = '

img_area.innerHTML = '

图片img标签展示：< ;/div>

'; }

}

2.2 HTML5 の FileReader を使用して、base64 コードを作成します

HTML5 Javascript バージョン本核心代码：
var file = this.files[0];
if(!/image/w /.test(file.type)){
alert("请确保文件は图像类型");
return false ;
}
var Reader = new FileReader();
Reader.readAsDataURL(file);
Reader.onload = function(e){

result.innerHTML = '

'; img_area.innerHTML = '

图片img标签展示：

}