• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

BLOB image to browser WITHOUT using CFIMAGE?

LEGEND ,
Mar 13, 2017 Mar 13, 2017

Copy link to clipboard

Copied

Hello, all,

I am trying to re-write part of an application that loads images from a database into a carousel.

Currently, the logic grabs the BLOBs from the database, saves them to a folder, and then displays the images.

I'd like to grab the BLOBs and directly display them on the page without saving them to a folder.  However, after all the Google search attempts, I have not found a solution - they all want to use CFIMAGE action="writeToBrowser".

Unfortunately, the directory that these images are saved to with writeToBrowser action is blocked by network admins and the people who control the CF server.  So I _can't_ use CFIMAGE.

Is there a way to take the BLOB images direct from database to browser without using CFIMAGE??

V/r,

^_^

UPDATE: We need to be able to support IE9+, possibly IE8, and FireFox v42+.

Views

1.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Advocate , Mar 14, 2017 Mar 14, 2017

Its technically supported but the size limit is where the issue will lie. You will have to test it.

The other option to read the file and then save it to a dir you do have access to then use this to display the image. So save it to /images/ for example and the image src just points to that folder.

Without access to certain things you will be limited.

You might be able to do it with cfcontent.

Use something like:

<cfcontent reset="Yes" type="image/jpg" variable="#QueryName.BlobColumn#"/>

This would go

...

Votes

Translate

Translate
Advocate ,
Mar 14, 2017 Mar 14, 2017

Copy link to clipboard

Copied

You could use BinaryEncode to convert the binary to base64. Then use this base64 in the src of the image.

There were some limitations with older browsers and base64 images. They could only be so large before the browser didnt load them.

I would just ask for the temp dir to be unblocked by the admins though ^^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 14, 2017 Mar 14, 2017

Copy link to clipboard

Copied

haxtbh  wrote

I would just ask for the temp dir to be unblocked by the admins though ^^

I'm a federal contractor.  The DoD won't even hear me asking.  Not happening.

Thanks for the suggestions, but will that work with A) IE8 or IE9, and B) with large images (4-8M)?  You're referring to the "data:" method, right?

V/r,

^_^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Mar 14, 2017 Mar 14, 2017

Copy link to clipboard

Copied

Its technically supported but the size limit is where the issue will lie. You will have to test it.

The other option to read the file and then save it to a dir you do have access to then use this to display the image. So save it to /images/ for example and the image src just points to that folder.

Without access to certain things you will be limited.

You might be able to do it with cfcontent.

Use something like:

<cfcontent reset="Yes" type="image/jpg" variable="#QueryName.BlobColumn#"/>

This would go in separate page that you pass the required vars you need for the query (i.e. the id). You could save this as getMyImage.cfm then call it from the src of the image you want to show.

<img src="getMyImage.cfm?queryID=1234">

Never tried it myself, but could work.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 14, 2017 Mar 14, 2017

Copy link to clipboard

Copied

haxtbh  wrote

Never tried it myself, but could work.

Actually, there is an older project, here, where that is being done.  I didn't realize (until now) that the previous developer did that because of the CFIMAGE problem.  Seems 'hackish', to me, but now I see that it is totally necessary in this environment.  Sadly.

Thank you for your help.  I'll give that a shot and report back.

V/r,

^_^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 14, 2017 Mar 14, 2017

Copy link to clipboard

Copied

LATEST

Yep, yep, that worked. 

In the application.cfc, there is a conditional that states if more than a minute has passed since the last images refresh, it will pull the images from the database and assign them to application variables.  The page in question will then load the carousel with the images from the application variable.  Most of the images are between 400 and 600k in size; many are just under 1Meg; a few are between 1.5Meg and 8Meg.  The 1.5Meg images load in about 250ms, so that's quite nice.

The "display.cfm" page is so simple, it kills me.  I param a URL parameter (position of the application variable array) to 1, check to make sure that the URL parameter is a single digit - if not, set the URL parameter to 1.  Then CFHEADER and CFCONTENT using the binary located in the indexed position.  Voila.  Still seems hackish, to me, but it works and it doesn't use CFIMAGE. 

Thanks, again, for the suggestion, haxtbh​.

V/r,

^_^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation