Question

这是我在我的网页上显示blob图像的代码..

$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);

但问题是图像在chrome和IE上没有显示??? 我为分页图像使用了分页。请给出任何解决方案？

Answer 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

使用基本编码64时，Blob图像不会显示在IE和Chrome上

1 个答案: