3

I have stored the image in Oracle DB in CLOB when i am converting it back using base64 in image source it works fine in Chrome & Firefox but in Internet Explorer. some part of the image is shown after that dots appeared in remaining Picture.

I try to solve this problem through simple as well as through programmatically but same result.

Here is my html

     <a class="fancybox" href="@images.IMG" 
data-fancybox-group="gallery"> <span style="color:#428bca;font-size:34px;margin-top:-34px;
float:right;" class="glyphicon glyphicon-picture"></span></a>

Here @images.IMG contains simple clob data without any conversion i am using Fancybox a JQuery plugin to show pictures.

C# way

byte[] byt = Convert.FromBase64String(imgclobdata);
   MemoryStream ms = new MemoryStream(byt);
   var img= "data:image/jpg;base64," + Convert.ToBase64String(ms.ToArray(), 0, ms.ToArray().Length);

Attached Sample

Athari
  • 33,702
  • 16
  • 105
  • 146
Mohsin
  • 902
  • 3
  • 23
  • 49

6 Answers6

1

There's a limit of how much data you can cram into data uri. Internet Explorer's limit is lower than Firefox's or Chrome's (and varies between versions).

In short: don't do that. Data scheme is acceptable only for small files.

Athari
  • 33,702
  • 16
  • 105
  • 146
  • but if i show the image on page instead of any jquery plugin then why it is displaying correctly – Mohsin Sep 17 '14 at 06:03
  • @MohsinMustufa Show the code for both versions (edit the question). http://stackoverflow.com/help/mcve – Athari Sep 17 '14 at 06:08
  • @MohsinMustufa You're trying to discuss code which you haven't shown. It isn't productive. You haven't read http://stackoverflow.com/help/mcve, have you? – Athari Sep 17 '14 at 06:18
1

Internet Explorer has a limit on maximum URL length of 2083 characters.

If you want to circumvent this limitation you can place your base64 image inside of the img tag's src attribute:

<img src="Base64StuffGoesHere" />

This question has some nice answers on how to make fancybox work without using href attributes.

Community
  • 1
  • 1
Yurii
  • 4,811
  • 7
  • 32
  • 41
0

Special Thanks to @Yuriy

This work for me in all browers

 <span style="color:#428bca;font-size:34px;margin-top:-34px;
float:right;" class="glyphicon glyphicon-picture" onclick="showImg('@images.IMG');"></span>

    function showImg(data){
 $.fancybox([
  'images/01.jpg',
  'images/02.jpg', // etc
  ],{
   // fancybox options 
   'type': 'image' // etc.
 }); // fancybox
}
Mohsin
  • 902
  • 3
  • 23
  • 49
0

Instead of sending Clob string, create a ashx handler and write down your content in ashx.

For details you may refer

Display Image using ashx Handler

Community
  • 1
  • 1
Zeeshan Umar
  • 502
  • 2
  • 6
  • 12
0

This works for me : add a ID attribute to your picture and add the link to this ID

promos.Text += "<div class='recent-work-item'>";
promos.Text += "    <em>";
promos.Text += "        <img src='" + image + "' alt='" + title + "' class='img-responsive'>";
promos.Text += "        <a href='http://www.acipa.fr/Blog/post/" + url + "' target='_blank'><i class='fa fa-link'></i></a>";
// this line doesn't work on IE because URL of href is too long
//promos.Text += "        <a href='" + image + "' class='fancybox-button' title='' data-rel='fancybox-button'><i class='fa fa-search'></i></a>";

// this line works on IE because it is an internal link:
promos.Text += "        <a href='#" + postid + "' class='fancybox-button' title='' data-rel='fancybox-button'><i class='fa fa-search'></i></a>";
promos.Text += "    </em>";
promos.Text += "</div>";
// add this img with an ID for the link
promos.Text += "        <img src='" + image + "' alt='" + title + "' class='img-responsive' id='" + postid + "'>";
yonel
  • 21
  • 3
0

Yes, because of this uri limitation you shouldn't use anchor tag, instead you can try this: 

<div class="fancybox" data-fancybox data-src="data:image/png;base64, ..." data-type="image">
 <img src="data:image/png;base64, ..." alt="image">
</div>
Artem
  • 11
  • 1