1

Because of the way I'm normally getting image data normally from an HTTP response supplying image data from the database, it is a base64 encoded value of the image. If it isn't present, I am trying to substitute a default image.

An example of the html to display the image is like:

        <img [src]="'data:'+sample.mimetype+';base64,'+sample.value"
                alt="" width="75%"  />

The call I'm currently making to retrieve the image returns a blob. (note I'm currently looking at the entire response only to help try to figure out what I am getting). If the answer is using a different type of image response, I'm all ears. Here is the current call to retrieve the image from the file system.

    return this.httpClient
        .get<any>('./assets/images/face-not-avail.jpg', {observe: 'response', responseType: 'blob' })
        .map(response =>{
            console.log('face response ' + response);
            return response.body;
        })
        .catch(this.errorHelperService.handleError);

Here is the contents of the image response: enter image description here

But I am having trouble figuring out how to turn that blob into the type of base64 encoded value attrubute that I normally am dealing with. I won't list everything I have tried... But I can't seem to get access to the blob data. The blob type is image/jpeg as expected.

I've been looking around, but nothing seems to fit.

Any advice would be greatly appreciated.

austinlhorn
  • 21
  • 1
  • Why convert it to base64? Why not just set the `src` to that url? – user184994 Nov 16 '18 at 23:14
  • The closest I seem to have gotten is using a FileReader, readAsText and onload using reader.result. But the image is not displaying. Thinking maybe it wasn't base64 encoded, I tried to btoa the result. But that caused an error. – austinlhorn Nov 16 '18 at 23:17
  • I would rather leave the page definition alone and just supply a new value. Normally I don't have an image source, just contents. – austinlhorn Nov 16 '18 at 23:19
  • What error did it cause? – user184994 Nov 16 '18 at 23:23
  • GET unsafe:data:image/jpeg;base64,%EF%BF%BD%EF*** more data ***D%08 net::ERR_UNKNOWN_URL_SCHEME – austinlhorn Nov 16 '18 at 23:36
  • I have also tried to btoa and or atob the results for kicks just to see, and both get the error: Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. – austinlhorn Nov 16 '18 at 23:38
  • The image data I normally get from the server starts like "/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBA" – austinlhorn Nov 16 '18 at 23:40
  • The image data in the reader.result looks starts like "����JFIFxx��:ExifMM*QQQ��C" – austinlhorn Nov 16 '18 at 23:42
  • The first error you got about the URL is because the URL needs sanitising. Was this code working previously? For the second error, take a look at https://stackoverflow.com/questions/18650168/convert-blob-to-base64 – user184994 Nov 16 '18 at 23:50

0 Answers0