Set a Content-Type

[Sampath-Lokuge]

Hi,

I have followed Background image thumbnail processing with Azure Functions and NodeJS article to create Azure functions.It is working fine. The problem which I have is, how to set the Content-Type on the thumbnailed image.At this moment it is Stream.

function.json

{
  "bindings": [
    {
      "name": "myBlob",
      "type": "blobTrigger",
      "direction": "in",
      "path": "project2-photos-original/{name}",
      "connection": "thumbnailfunction_STORAGE",
      "dataType": "binary"
    },
    {
      "type": "blob",
      "name": "$return",
      "path": "project2-photos-thumbnail/{name}",
      "connection": "thumbnailfunction_STORAGE",
      "direction": "out"
    }
  ],
  "disabled": false
}

I have tried as shown below.But it is not working.

index.json

var Jimp = require("jimp");

module.exports = (context, myBlob) => {

    // Read image with Jimp
    Jimp.read(myBlob).then((image) => {

        // Manipulate image
        image
            .resize(200, Jimp.AUTO)
            .greyscale()
            .getBuffer(Jimp.MIME_JPEG, (error, stream) => {
   
                if (error) {
                    context.log(`There was an error processing the image.`);
                    context.done(error);
                }
                else {
                                
                     context.res = { headers: {
                        'Content-Type': Jimp.MIME_JPEG
                     }};
                    context.log(`Successfully processed the image`);
                    context.done(null, stream);

                }

            });

    });

};

[mamaso]

Hey @Sampath-Lokuge

I responded to your stackoverflow post

Couple quick things, stream is not a stream, it's a buffer. That's good, because we don't support returning strings from node functions just yet.

Also, you can set the content type on the response object (context.res) via context.res.type('text/plain') or context.res.set('content-type', 'text/plain')

In your case, I'd use:

var buffer = stream; // make sure you're using buffer
context.res.type(Jimp.MIME_JPEG).raw(buffer);

[Sampath-Lokuge]

Hi @mamaso

Still, it is not working for me.This is the final code.please check whether is that ok or not?

var Jimp = require("jimp");

module.exports = (context, myBlob) => {

    // Read image with Jimp
    Jimp.read(myBlob).then((image) => {

        // Manipulate image
        image
            .resize(200, Jimp.AUTO)
            .greyscale()
            .getBuffer(Jimp.MIME_JPEG, (error, stream) => {

                // Check for errors
                if (error) {
                    context.log(`There was an error processing the image.`);
                    context.done(error);
                }
                else {
                   
                 
                    var buffer = stream; // make sure you're using buffer
                    context.res.type(Jimp.MIME_JPEG).raw(buffer);
                    context.log(`Successfully processed the image`);
                }

            });

    });

};

[mamaso]

Ah, my mistake, I thought that you were using an http response binding. I see that you're using a blob output binding.

Unfortunately there isn't a way to specify the content type for a blob output binding from node. You could chose to drop the blob output binding and explicitly use the azure storage sdk inside your function to store the blob, which would give you access to the blob.

Also, a C# function has the ability to set content-type on a blob as it can use the CloudBlockBlob type in a binding, but that doesn't help you in this node scenario.

[Sampath-Lokuge]

Hi @mamaso

On node there is a way to do that.

var Jimp = require("jimp");

var express = require("express");
var app = express();

app.get("/my-dynamic-image", function(req, res){
    Jimp.read("lenna.png", function(err, lenna) {
        lenna.resize(64, 64).quality(60).getBuffer(Jimp.MIME_JPEG, function(err, buffer){
             res.set("Content-Type", Jimp.MIME_JPEG);
             res.send(buffer);
         });
    });
});

app.listen(3000);

Don't we have a way to convert this into Azure function? Can't we use it like this? why below code is not working ?

context.res = { headers: {
                        'Content-Type': Jimp.MIME_JPEG
                     }}; 

[mamaso]

It depends on what your goal is: do you want to send an http response with the blob as body and content type set correctly? Yes, it can be done (that's what the node example is doing).

If you want to store the blob in azure storage with a content type, that is not possible via node (unless if you use the azure storage sdk).

[Sampath-Lokuge]

Hi @mamaso ,

Actually, my requirement is to show the converted thumbnail image on the UI. Hence this is stream it automatically downloaded instead of showing as an image. So is there a way to show it as an image when I need to show on the UI. It doesn't matter where stored as a stream on the blob container.I just need to show as an image on the front end. Any workaround?

[mamaso]

It seems that you're using your function to create the thumbnails, once they're created and uploaded in the blob (which your original function should accomplish, without the content-type) I think you can use an <img src="path/to/blob/thumbnail"> in your UI (assuming html based).

[Sampath-Lokuge]

Hi @mamaso

You're right.That is my bad.Thanks a lot for your support.Have a nice day ahead!

[mamaso]

Great, happy to help, have a good one!