Wie kann ich eine PNG-Datei in eine leere Datei "file.html" einbetten, so dass beim Öffnen dieser Datei in einem beliebigen Browser das Bild angezeigt wird? In diesem Szenario wird die Bilddatei nicht mit dem HTML-Code verknüpft, sondern die Bilddaten werden in den HTML-Code eingebettet.Kann ich ein PNG-Bild in eine HTML-Seite einbetten?
Es gibt ein paar Base64 Encoder online, um Ihnen dabei zu helfen, ist dies wahrscheinlich die beste, die ich je gesehen habe:
http://www.greywyvern.com/code/php/binary2base64
Wie dieser Seite zeigt Ihre wichtigsten Optionen hierfür sind CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>);
}
Oder die <img> Tag selbst, wie folgt aus:
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" />
schnelle Google-Suche sagt, dass Sie es so einbetten:
<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">
Aber Sie brauchen eine andere Implementierung in Internet Explorer.
http://www.websiteoptimization.com/speed/tweak/inline-images/
Beachten Sie, dass dies nur mit kleinen Bildern funktioniert: Je größer das Bild, desto größer wird die kodierte Zeichenkette, und es gibt eine Grenze dafür, wie lange die "src" kann sein. Und abgesehen davon ist es uggly imho :) – Alec
Einsatz mod_rewrite den Anruf zu umleiten file.html ohne die URL image.png für den Benutzer zu ändern
Haben Sie versucht, nur die image.png Datei Umbenennung in file.html? Ich denke, die meisten Browser nehmen Pantomime Header über Dateierweiterung :)
Ich weiß Firefox tut das, während IE die Datei selbst betrachtet. – Rangoric
Was ist, wenn Sie nicht Apache verwenden? Was, wenn Sie keine verwenden Webserver überhaupt (zB HTML-Email)? –
Die 64base-Methode funktioniert auch für große Bilder, ich verwende diese Methode, um alle Bilder in meine Website einzubetten, und es funktioniert jedes Mal. Ich habe mit Dateien bis zu 2Mb Größe, JPG und PNG getan.
Ich weiß nicht, wie lange dieser Beitrag hier war. Aber ich bin jetzt auf ein ähnliches Problem gestoßen. Daher posten Sie die Lösung, damit sie anderen helfen kann.
#!/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
Sie sind jedoch abhängig vom verwendeten Webbrowser, ob es einwandfrei funktioniert. – BalusC
@BalusC - True, aber das ist, was die Frage gefragt ... keine Optionen außer der normalen externen Datei Route. –
Dies scheint nicht für mich in Chrome zu funktionieren .. :(Fragen, ob die Base64 Daten falsch sind .. :( – WORMSS