My web application accesses adobe illustrator files from s3 object storage. I need to display a preview of these images. Web browsers don’t support .ai files, so they need to be converted into a browser safe format (jpg, png, etc). How can I convert these images for display on the frontend?
I found two ways of doing this with Cloudinary. The best option in my situation is to use a Cloudinary transform url. All you have to do is append your hosted image url to the end of their transform url.
// Illustrator file url
https://example.com/assets/filename.ai
// Transform url (replace <cloudName> with your actual cloud name)
https://res.cloudinary.com/<cloudName>/image/fetch/c_scale,h_400/f_jpg/
// Combined
https://res.cloudinary.com/<cloudName>/image/fetch/c_scale,h_400/f_jpg/https://example.com/assets/filename.ai
This new combined url can be used to access the converted preview. It serves a low resolution jpg. It won’t be stored on your cloudinary account. Instead it will be stored on the Cloudinary CDN.
Alternatively, if you need to store the converted image, you can use the Cloudinary upload api. Here’s an example using Node:
async function uploadAndConvertImage(filePath: any) {
const url = `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`;
const timestamp = Math.floor(Date.now() / 1000);
const paramsToSign = `format=png×tamp=${timestamp}${CLOUD_SECRET}`;
const signature = createHash('sha1').update(paramsToSign).toString();
const formData = new FormData();
const fileContent = (await fetch(filePath));
const fileBuffer = await fileContent.arrayBuffer();
formData.append('file', new Blob([fileBuffer]));
formData.append('api_key', CLOUD_KEY);
formData.append('timestamp', timestamp.toString());
formData.append('format', 'png'); // Convert to PNG
formData.append('signature', signature);
try {
const response = await fetch(url, {
method: 'POST',
body: formData
});
const result = await response.json();
return result.url;
} catch (error) {
console.error('Error uploading image:', error);
}
};
In the above example, your image will be converted at full resolution into a png, then stored in your cloud. The function returns a cloudinary url leading to the converted image. For this option to work, you’ll need an api key and secret in addition to your cloud name.