1

Here is my code to show blob images on my webpage..

$sql = mysql_query("SELECT slider_id,date,page_image FROM news_slider where date='$ndate' order by slider_id ASC LIMIT $start, $limit");

// the result of the query
// $result = mysql_query("$result") or die("Invalid query: " . mysql_error());

while ($slider_rs = mysql_fetch_array($sql)) {
    $sl_id = $slider_rs['slider_id'];
    $sl_img = $slider_rs['page_image'];
    echo '<div class="showcase-slide">';
    echo '<div class="showcase-content">';
    echo '<div class="map" style="display: block; background-image:url(' . base64_encode($sl_img) . '); position: relative; padding: 0px; width: 518px; height: 801px; background-position: initial initial; background-repeat: initial initial;">';
    echo '<canvas style="width: 518px; height: 801px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 0.9999999999999999;" height="801" width="518"></canvas>';
    echo '<img id="image' . $sl_id . '" class="map maphilighted" usemap="#Map' . $sl_id . '" src="data:image/jpeg;base64, ' . base64_encode($sl_img) . ' " align="top" style="border: 0px; opacity:0.9999999999999999; position: absolute; left: 0px; top: 0px; padding: 0px;">;';
    echo '</div>';
    echo '<span id="Label1" style="display:inline-block;height:1px;width:1px;">';
    echo '<map name="Map' . $sl_id . '">';
    $get_list = "select news_id,x1,y1,x2,y2 from cords where slider_id='{$sl_id}'";
    $get_list_res = mysql_query($get_list) or die("Invalid query: " . mysql_error());
    if (mysql_num_rows($get_list_res) > 0) {
        while ($add_cords = mysql_fetch_array($get_list_res)) {
            $news_id = $add_cords[news_id];
            $a = $add_cords[x1];
            $b = $add_cords[y1];
            $c = $add_cords[x2];
            $d = $add_cords[y2];
            echo '<area shape="rect" coords="' . $a . ',' . $b . ',' . $c . ',' . $d . '" "href=" " onclick="showUser(' . $news_id . ')"  alt=" " title=" " id="' . $news_id . '" >' . "\n";
        }
    }

    echo ' </map>';
    echo '</span>';
    echo '</div>';
    echo '</div>';
}

// close the db link

mysql_close($link);

but problem is images are not dispay on chrome and IE??? i used pagination for paginate images. Please give any solution?

4

1 回答 1

1

我认为您还需要包含 mimetype 和 base 64 标头：

尝试改变这个：

background-image:url('.base64_encode($sl_img).');

...对此：

background-image:url(data:image/jpeg;base64,'.base64_encode($sl_img).');

当然，这仅在 blob 是 JPEG 时才有效。例如，如果它是 PNG，您将使用 image/png。

有关更灵活的实现，请参阅此页面：http: //devin.la/blog/base64-encode-images-css-script-mobile

于 2013-11-05T20:03:40.823 回答