3

I have image data in an arrayBuffer following an xmlHttpRequest. I need to display the image in an image tag. For most browsers I can use a blob to reference the binary data but I need to support mobile Safari on iOS 5.1 which has no support for blobs. My initial thought was to base64 encode the data and just set the src attribute on the image tag like so:

this.imageTag.src = 'data:image/jpeg;base64,' + base64EncodedImage;

However, in some instances the base64EncodedImage string is over 800,000 characters long and just crashes the browser.

What other method could I use to display the image (I only have access to the arrayBuffer data and can't make any server side changes easily)?

Simple Simon
  • 712
  • 2
  • 8
  • 23
  • Use canvas.Set the img source to base64 string.However large it may be.It will be displayed on canvas :) Cheers – AkshayJ Aug 17 '15 at 06:42
  • I think the data URI scheme is too long for canvas as well. Image never loads. – Simple Simon Aug 17 '15 at 07:03
  • Whats the size of the base64 string ??....In my case it works fine my string ranging from 100-300 kb... – AkshayJ Aug 17 '15 at 07:05
  • How do I see size of string? it's over 800,000 characters long. – Simple Simon Aug 17 '15 at 07:06
  • Size shouldnt be a problem here...I guess the issue is something else...can you show the fiddle of your code? – AkshayJ Aug 17 '15 at 07:07
  • May I ask why you get it through xhr ? also I don't have ios5.1 sdk but does it support `responseType = 'blob'` ? Are you sure that it does support `responseType = 'arraybuffer'`? – Kaiido Aug 17 '15 at 07:36
  • here is a simple fiddle (that doesn't work on jsFiddle (never gets to the onload function) but works if I use it in my code). The same code never shows the same image if I use my 'real', bigger images: https://jsfiddle.net/vvvkh4rc/ – Simple Simon Aug 17 '15 at 08:22
  • @SimpleSimon hi i think you should refer **http://stackoverflow.com/questions/11402329/base64-encoded-image-size** that might help you – Himesh Aadeshara Aug 17 '15 at 08:35
  • Why don't you directly set `document.getElementById('myImage').src = url` ??? – Kaiido Aug 17 '15 at 08:46

0 Answers0