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
  • 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
  • Let me add the contents of the JSX file, it isn't much
    – Adrift
    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()

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.