Ben bir html sayfası içine bir. Png görüntüyü gömmek miyim?

6 Cevap php

Yani bir. Png dosyası var. Ben windows işletim sistemi kullanıyorum. Onu içine ebbeded - Eğer herhangi bir tarayıcıda o dosyayı açtığınızda bu görüntüyü görmek, ama dosya zaten buna bağlı kalmayacak şekilde nasıl file.html (varsayılan olarak boş) içine benim png dosya / görüntüyü gömmek mi?

Adım adım talimatlar güzel olurdu.

6 Cevap

Bu size yardımcı olmak için çevrimiçi bir kaç base64 encoder vardır, bu muhtemelen gördüğüm en iyisi:

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

O sayfa gösteriyor gibi bu için ana seçenek CSS şunlardır:

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

Ya <img> bu gibi kendini etiketlemek:

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

64base yöntem de büyük görüntüler için çalışır, web siteme içine tüm görüntüleri gömmek için bu yöntemi kullanın ve her zaman çalışır. I 2Mb size, jpg ve png kadar dosyaları ile yaptık.

Ben bu yazı burada ne kadar süredir bilmiyorum. Ama şimdi benzer bir sorun tökezledi. Başkalarına yardımcı olabilir, böylece bu nedenle çözüm gönderme.

#!/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

Sen need bir şekilde bağlamak için. Biraz CSS yardımı ile vücudun arka plan olarak ayarlayabilirsiniz.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2807251</title>
        <style>body { background: url('/url/to/file.png') no-repeat; }</style>
    </head>
    <body>
    </body>
</html>

Hızlı google arama Böyle gömün diyor:

<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">

Ama Internet Explorer'da farklı bir uygulama gerekiyor.

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

kullanıcı için değişiyor url olmadan image.png için file.html için çağrı yönlendirmek için mod_rewrite kullanımı

Sadece file.html için image.png dosyayı yeniden adlandırma denediniz mi? Ben en tarayıcı dosya uzantısı üzerinde mim başlığı almak düşünüyorum :)

etiketler