I'm building an e-commerce site and use a .JSX script to bulk resize images and add canvas if needed so the aspect ratio is 1:1

The problem is the default canvas color in Photoshop CC 2017 does not quite match the background of my site. For example, you can see clearly how the canvas color clearly doesn't blend in with the site background. What is the easiest way to change this canvas color so it isn't such an eye sore?

enter image description here

As requested, here is the JSX script I use:

var inputFolder = Folder.selectDialog("Select a folder to process"),
       fileList = inputFolder.getFiles(/\.(jpg|tif|psd|crw|cr2|nef|dcr|dc2|raw)$/i);

for(var i=0; i < fileList.length; i++) {
        var doc = open(fileList[i]);
        if(doc.width !== doc.height) {
            if(doc.width > doc.height) {
                doc.resizeCanvas(doc.width, doc.width)
            } else {
                doc.resizeCanvas(doc.height, doc.height)
        if((doc.width && doc.height) > 1000) {
            doc.resizeImage(1000, 1000);
        } else {
            doc.resizeImage(doc.width, doc.height);

  • Perhaps it's my failing eyes, but I'm failing to see any difference in your image. – Scott Sep 5 '19 at 16:20
  • I wonder if it's just my monitor, but it's very clear to me. I'm using a 15" Dell monitor with an HDMI cable. – Adrift Sep 5 '19 at 16:21
  • There is a very small difference but if you use a color picker you can see it. We would need to see the JSX file to know what is going on. Because Photoshop by default has a white background. – AndrewH Sep 5 '19 at 16:25
  • 1
    @Adrift Why not solve this in CSS? It would seem cleaner to me, than extending the image files. And also this would allow to change the background color any time without rerendering all images. – AAGD Sep 5 '19 at 18:54
  • 2
    Generally PNG24 is sometimes slightly larger, but it really depends upon the image data. I'd test a few and check. With those rugs and the patterns, there wasn't any great area benefiting from jpg compression. So, you might find PNG24 may be slightly smaller than jpgs. JPG compression works most in areas of broad similar color. – Scott Sep 5 '19 at 19:38

Check that your background color is the color you need: by default Document.resizeCanvas() uses it when the canvas is enlarged:

enter image description here

You can pass color with an AM command though, something like this:

    hue: 180,
    saturation: 100,
    brightness: 50

function resizeCanvas(width, height, color)
    if (color == undefined) color = {
        hue: 0,
        saturation: 0,
        brightness: 100

    var desc = new ActionDescriptor();
    desc.putUnitDouble(charIDToTypeID('Wdth'), charIDToTypeID('#Pxl'), width);
    desc.putUnitDouble(charIDToTypeID('Hght'), charIDToTypeID('#Pxl'), height);
    desc.putEnumerated(charIDToTypeID('Hrzn'), charIDToTypeID('HrzL'), charIDToTypeID('Cntr'));
    desc.putEnumerated(charIDToTypeID('Vrtc'), charIDToTypeID('VrtL'), charIDToTypeID('Cntr'));
    desc.putEnumerated(stringIDToTypeID('canvasExtensionColorType'), stringIDToTypeID('canvasExtensionColorType'), charIDToTypeID('Clr '));
    var descColor = new ActionDescriptor();
    descColor.putUnitDouble(charIDToTypeID('H   '), charIDToTypeID('#Ang'), color.hue);
    descColor.putDouble(charIDToTypeID('Strt'), color.saturation);
    descColor.putDouble(charIDToTypeID('Brgh'), color.brightness);
    desc.putObject(stringIDToTypeID('canvasExtensionColor'), charIDToTypeID('HSBC'), descColor);
    executeAction(charIDToTypeID('CnvS'), desc, DialogModes.NO);
} // end of resizeCanvas()
| improve this answer | |

In Photoshop, you would select Image > Adjustments > Replace Color.

But the rug background is an off-white. Maybe that's intentional? If so, I'd explain the site background is pure white and the two are clashing, request a review and updated images. (And while at it, I'd ask for higher fidelity images.)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.