function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
James CarboneJames Carbone 

Visualforce page to output binary PNG image

Hi,

 

I've been trying to get a Visualforce page to output a PNG image.  For example, you hit the URL and the picture displays in the browser window.  The content-type setting appears to allow this sort of thing.  For example I was able to output a BMP with code similar to this:

 

VF page:

<apex:page controller="TileRedirector" contentType="image/bmp"  showHeader="false" sidebar="false">{!Content}</apex:page>

 

 

Controller snippet:

public string getContent()

{

    string content = 'BM:6( ##Ÿˇ';    

    return content;

}

 

 

When I try this with a PNG I get an invalid image.  My current thinking is that the content type for the page is outputs as image/png; charset=UTF-8;

 

I can force different charset's by adding the charset to my VF page without effect.  I'm reading the image from another source and can successfully view that image from their web site.  The difference is that the content type for those requess always respond as "image/png" without a char set specified.

 

Has anyone successfully returned a PNG from a VF page before?

 

Thanks,

Jim 

sfdcfoxsfdcfox

"Character sets" are for textual data. Binary data does not understand the concept of character sets and should always be output as raw data. The problem here is that the "string" class in Apex Code is always in utf-8, which is consistent with the language that Salesforce is designed in (Java). I suspect that Apex Code is somehow managing to mangle your output stream (and it only takes a single mishap to kill an entire file). You should be able to add a "Content-Encoding" header to the page's headers, using the header name "Content-Encoding" with a value of "base64". Then, use EncodingUtil.base64encode and return the string directly into the browser.
Prajapati.LakhanPrajapati.Lakhan

Hi,

How can I set the page header for content Encoding in SFDC. "PageReference" class doesnot have any method like "setHeader(name, value)" and "<apex:page>" dont have any attribute like "content-encoding". Please provide more details.

 

Thanks,

Lakhan

 
James CarboneJames Carbone

Use the contentType attribute.

 

<apex:page controller="TileRedirector" contentType="image/png; charset=binary;" ....
Prajapati.LakhanPrajapati.Lakhan

Hi,

 

Thanks for the reply but in salesforce I can't convert blob into binary strings the only encoding for binary data in salesforce is base64 and it seems I can't use contentType="images/png;charset:base64" , actually I tried it so that i could display a preview of an image before actual upload to the attachment object.

 

 

Thanks,

Lakhan
bruins202bruins202

Hi folks,

 

We're trying to allow a visitor to hit a VisualForce page address, and have the result be an image/gif content type.  Unfortunately, no matter what we do (even following the first poster's example code above for BMP files) we're never able to have a properly formatted image load.  We're literally using carbonedev code line for line, but are unable to have it load a bmp file.

 

Ideas?

Cheers!
fgwarb_devfgwarb_dev
Hey hey, 8 years later.  My req was a little looser.  I just needed to serve an image (any type) through a VF page where the contentType was image/[whatever].  I couldn't get PNG to work, regardless of base64 / binary (encodingutil, blob) or anything.

However, I finally found a blog post about how to use image/svg+xml 

https://bigassforce.com/dynamic-svg-images, here's his VF sample (copy/pasted because who knows when that blog will go offline).  He used some apex and custom objects to allow the page to render different images.  The concept is here though. 
<apex:page contentType="image/svg+xml" standardController="Order">

<!-- count number of attachments to calculate image height -->
<apex:variable var="ids" value="{!''}{!Order.Attachments}" />
<apex:variable var="size" value="{!ROUND(LEN(ids)/20,0)}" />
<apex:variable var="height" value="{!MAX(1, 20 * size)}" />

<!-- begin SVG markup -->
<svg width="150" height="{!height}" xmlns="http://www.w3.org/2000/svg">
<g fill="none" text-anchor="middle" font-family="sans-serif" font-size="12">
<foreignObject width="150" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;">

<!-- loop over each attachment -->
<apex:repeat value="{!Order.Attachments}" var="attachment">

<!-- embed white page icon -->
<img src="{!'data:image/png;base64,'
+ 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAA'
+ 'Bl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAC4SURBVCjPdZFbDsIgEE'
+ 'WnrsMm7oGGfZrohxvU+Iq1TyjU60Bf1pac4Yc5YS4ZAtGWBMk/drQBOVwJlZrWYkLhsB8'
+ 'UV9K0BUrPGy9cWbng2CtEEUmLGppPjRwpbixUKHBiZRS0p+ZGhvs4irNEvWD8heHpbsyD'
+ 'XznPhYFOyTjJc13olIqzZCHBouE0FRMUjA+s1gTjaRgVFpqRwC8mfoXPPEVPS7LbRaJL2'
+ 'y7bOifRCTEli3U7BMWgLzKlW/CuebZPAAAAAElFTkSuQmCC'}" />

<!-- list each filename -->
{!attachment.Name}<br /></apex:repeat></textArea></foreignObject></g></svg>
</apex:page>