web-dev-qa-db-ja.com

.png画像をhtmlページに埋め込むことはできますか？

.pngファイルを空白の「file.html」に埋め込み、ブラウザでそのファイルを開いたときにその画像が表示されるようにするにはどうすればよいですか？このシナリオでは、画像ファイルはHTMLからリンクされていませんが、画像データはHTML自体に埋め込まれています。

phphtmlimageembed
41
Rella

これを支援するためにオンラインでいくつかのbase64エンコーダーがありますが、これはおそらく私が見た中で最高です：

http://www.greywyvern.com/code/php/binary2base64

そのページに示されているように、これの主なオプションはCSSです。

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>); 
}

または <img>タグ自体、次のように：

<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
49
Nick Craver

64baseメソッドは大きな画像でも機能します。私はその方法を使用してすべての画像をWebサイトに埋め込み、毎回機能します。 2Mbサイズ、jpg、pngまでのファイルを処理しました。

10
Diamax

この投稿がどれくらいの期間ここにあるかはわかりません。しかし、私は今、同様の問題に出くわしました。したがって、ソリューションを投稿して、他の人に役立つようにします。

#!/usr/bin/env Perl
use strict;
use warnings;
use utf8;

use Gd::Graph::pie;
use MIME::Base64;
my @data = (['A','O','S','I'],[3,16,12,47]);

my $mygraph = Gd::Graph::pie->new(200, 200);
my $myimage = $mygraph->plot(\@data)->png;

print <<end_html;
<html><head><title>Current Stats</title></head>
<body>
<p align="center">
<img src="data:image/png;base64,
end_html

print encode_base64($myimage);

print <<end_html;
" style="width: 888px; height: 598px; border-width: 2px; border-style: solid;" /></p>
</body>
</html>

end_html
3
Sand33p Prakash

mod_rewriteを使用して、ユーザーのURLを変更せずにfile.htmlの呼び出しをimage.pngにリダイレクトします

Image.pngファイルの名前をfile.htmlに変更しようとしましたか？私はほとんどのブラウザがファイル拡張子よりMIMEヘッダーを取ると思う:)

0
Thomas Winsnes

クイックGoogle検索では、次のように埋め込むことができます。

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

ただし、Internet Explorerで別の実装が必要です。

http://www.websiteoptimization.com/speed/Tweak/inline-images/

0
juandopazo