Create a custom resize panel for Photoshop that allows you to set canvas size and add padding around

[jahid30096762iy1t]

someone help fix this it does not crop from the path 

#target photoshop

// Function to create the resize panel dialog
function createResizePanel() {
var dialog = new Window("dialog", "Resize Panel");

// Add width input
var widthGroup = dialog.add("group");
widthGroup.add("statictext", undefined, "Width:");
var widthInput = widthGroup.add("edittext", undefined, "1000");
var widthUnitDropdown = widthGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
widthUnitDropdown.selection = 0;

// Add height input
var heightGroup = dialog.add("group");
heightGroup.add("statictext", undefined, "Height:");
var heightInput = heightGroup.add("edittext", undefined, "1000");
var heightUnitDropdown = heightGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
heightUnitDropdown.selection = 0;

// Add top padding input
var topPaddingGroup = dialog.add("group");
topPaddingGroup.add("statictext", undefined, "Top Padding:");
var topPaddingInput = topPaddingGroup.add("edittext", undefined, "50");
var topPaddingUnitDropdown = topPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
topPaddingUnitDropdown.selection = 0;

// Add bottom padding input
var bottomPaddingGroup = dialog.add("group");
bottomPaddingGroup.add("statictext", undefined, "Bottom Padding:");
var bottomPaddingInput = bottomPaddingGroup.add("edittext", undefined, "50");
var bottomPaddingUnitDropdown = bottomPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
bottomPaddingUnitDropdown.selection = 0;

// Add left padding input
var leftPaddingGroup = dialog.add("group");
leftPaddingGroup.add("statictext", undefined, "Left Padding:");
var leftPaddingInput = leftPaddingGroup.add("edittext", undefined, "50");
var leftPaddingUnitDropdown = leftPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
leftPaddingUnitDropdown.selection = 0;

// Add right padding input
var rightPaddingGroup = dialog.add("group");
rightPaddingGroup.add("statictext", undefined, "Right Padding:");
var rightPaddingInput = rightPaddingGroup.add("edittext", undefined, "50");
var rightPaddingUnitDropdown = rightPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
rightPaddingUnitDropdown.selection = 0;

// Add Crop checkbox
var cropCheckbox = dialog.add("checkbox", undefined, "Crop Image");

// Add OK and Cancel buttons
var buttonGroup = dialog.add("group");
var okButton = buttonGroup.add("button", undefined, "OK");
var cancelButton = buttonGroup.add("button", undefined, "Cancel");

// OK button click event
okButton.onClick = function() {
var width = parseInt(widthInput.text);
var height = parseInt(heightInput.text);
var widthUnit = widthUnitDropdown.selection.index;
var heightUnit = heightUnitDropdown.selection.index;
var topPadding = parseInt(topPaddingInput.text);
var bottomPadding = parseInt(bottomPaddingInput.text);
var leftPadding = parseInt(leftPaddingInput.text);
var rightPadding = parseInt(rightPaddingInput.text);
var paddingUnit = topPaddingUnitDropdown.selection.index;
var cropImage = cropCheckbox.value;

resizeCanvas(width, height, widthUnit, heightUnit, topPadding, bottomPadding, leftPadding, rightPadding, paddingUnit, cropImage);
dialog.close();
};

// Cancel button click event
cancelButton.onClick = function() {
dialog.close();
};

dialog.show();
}

// Function to resize the canvas and add padding
function resizeCanvas(width, height, widthUnit, heightUnit, topPadding, bottomPadding, leftPadding, rightPadding, paddingUnit, cropImage) {
var doc = app.activeDocument;

// Convert width to pixels
if (widthUnit === 1) {
width = inchesToPixels(width);
} else if (widthUnit === 2) {
width = cmToPixels(width);
}

// Convert height to pixels
if (heightUnit === 1) {
height = inchesToPixels(height);
} else if (heightUnit === 2) {
height = cmToPixels(height);
}

// Convert padding to pixels
if (paddingUnit === 1) {
topPadding = inchesToPixels(topPadding);
bottomPadding = inchesToPixels(bottomPadding);
leftPadding = inchesToPixels(leftPadding);
rightPadding = inchesToPixels(rightPadding);
} else if (paddingUnit === 2) {
topPadding = cmToPixels(topPadding);
bottomPadding = cmToPixels(bottomPadding);
leftPadding = cmToPixels(leftPadding);
rightPadding = cmToPixels(rightPadding);
}

var newWidth = width + leftPadding + rightPadding;
var newHeight = height + topPadding + bottomPadding;

doc.resizeCanvas(newWidth, newHeight, AnchorPosition.MIDDLECENTER);

if (cropImage) {
// Crop the image
var bounds = [
leftPadding,
topPadding,
doc.width - rightPadding,
doc.height - bottomPadding
];
doc.crop(bounds);
}
}

// Function to convert inches to pixels
function inchesToPixels(inches) {
var dpi = app.activeDocument.resolution;
return Math.round(inches * dpi);
}

// Function to convert cm to pixels
function cmToPixels(cm) {
var inch = 2.54;
return Math.round(cm * inch * app.activeDocument.resolution);
}

// Entry point
createResizePanel();

[c.pfaffenbichler]

Could you please post screenshots with the pertinent Panels (Toolbar, Layers, Options Bar, …) visible to illustrate what happens differently from what you expect? 

[jahid30096762iy1t]

https://youtu.be/rcn4vvTKvTI

I made a video to see what happens when I run the script  it should crop from the path  and  give me the result  like the size I gave on the panel I don't know why it's not working  plz help 

[c.pfaffenbichler]

There appears to be no reference to any path in the Script, so please explain what you mean. 

What do you expect to happen? 

[jahid30096762iy1t]

I wand a panel where I can customize padding size for my images  for example I want an image 2000x2000 px   and I wand gap around the image like 20px on top and 30px on bottom 50 px left and right 

[c.pfaffenbichler · Accepted solution]

That description seems unclear to me.

Please explain what you mean exactly with the help of screenshots. 

Do you just want to be able to numerically add different values for the expansion at the top, right, bottom, left sides additional to the existing canvas, in relation to a Selection or a Path, …? 

[jahid30096762iy1t]

yes you are  right  i want from path 

[c.pfaffenbichler]

What path? 

How do you identify the Path – the selected Path, a dropdownlist in the dialog, …? 

[c.pfaffenbichler]

This should work on the selected Path (see screenshots): 

(edit: I commented out the units-stuff as I consider pixels the meaningful unit here, if they are relevant to your work you will have to integrate them yourselves.)

// Function to convert inches to pixels
function inchesToPixels(inches) {
var dpi = app.activeDocument.resolution;
return Math.round(inches * dpi);
}
// Function to convert cm to pixels
function cmToPixels(cm) {
var inch = 2.54;
return Math.round(cm * inch * app.activeDocument.resolution);
}
// Entry point
var theSelectedPath = selectedPath2020 ();
if (theSelectedPath != undefined) {
var dialog = new Window("dialog", "Resize Panel");
// Add width input
var widthGroup = dialog.add("group");
widthGroup.add("statictext", undefined, "Width:");
var widthInput = widthGroup.add("edittext", undefined, "1000");
//var widthUnitDropdown = widthGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
//widthUnitDropdown.selection = 0;
// Add height input
var heightGroup = dialog.add("group");
heightGroup.add("statictext", undefined, "Height:");
var heightInput = heightGroup.add("edittext", undefined, "1000");
//var heightUnitDropdown = heightGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
//heightUnitDropdown.selection = 0;
// Add top padding input
var topPaddingGroup = dialog.add("group");
topPaddingGroup.add("statictext", undefined, "Top Padding:");
var topPaddingInput = topPaddingGroup.add("edittext", undefined, "50");
//var topPaddingUnitDropdown = topPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
//topPaddingUnitDropdown.selection = 0;
// Add bottom padding input
var bottomPaddingGroup = dialog.add("group");
bottomPaddingGroup.add("statictext", undefined, "Bottom Padding:");
var bottomPaddingInput = bottomPaddingGroup.add("edittext", undefined, "50");
//var bottomPaddingUnitDropdown = bottomPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
//bottomPaddingUnitDropdown.selection = 0;
// Add left padding input
var leftPaddingGroup = dialog.add("group");
leftPaddingGroup.add("statictext", undefined, "Left Padding:");
var leftPaddingInput = leftPaddingGroup.add("edittext", undefined, "50");
//var leftPaddingUnitDropdown = leftPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
//leftPaddingUnitDropdown.selection = 0;
// Add right padding input
var rightPaddingGroup = dialog.add("group");
rightPaddingGroup.add("statictext", undefined, "Right Padding:");
var rightPaddingInput = rightPaddingGroup.add("edittext", undefined, "50");
//var rightPaddingUnitDropdown = rightPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
//rightPaddingUnitDropdown.selection = 0;
// Add Crop checkbox
//var cropCheckbox = dialog.add("checkbox", undefined, "Crop Image");
// Add OK and Cancel buttons
var buttonGroup = dialog.add("group");
var okButton = buttonGroup.add("button", undefined, "OK");
var cancelButton = buttonGroup.add("button", undefined, "Cancel");
// OK button click event
okButton.onClick = function() {
var width = parseInt(widthInput.text);
var height = parseInt(heightInput.text);
//var widthUnit = widthUnitDropdown.selection.index;
//var heightUnit = heightUnitDropdown.selection.index;
var topPadding = parseInt(topPaddingInput.text);
var bottomPadding = parseInt(bottomPaddingInput.text);
var leftPadding = parseInt(leftPaddingInput.text);
var rightPadding = parseInt(rightPaddingInput.text);
//var paddingUnit = topPaddingUnitDropdown.selection.index;
//var cropImage = cropCheckbox.value;
// set to pixels ad get bound of selection based on path;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
activeDocument.pathItems[theSelectedPath[0]-1].makeSelection(0, true, SelectionType.REPLACE);
var theBounds = activeDocument.selection.bounds;
activeDocument.selection.deselect();
// calculate scale;
var theProp = (theBounds[2] - theBounds[0]) / (theBounds[3] - theBounds[1]);
var theTargetProp = width/height;
var horAdd = 0;
var verAdd = 0;
if (theProp > theTargetProp) {
    var theScale = Number(width/(theBounds[2] - theBounds[0]));
    verAdd = (height - (theBounds[3] - theBounds[1])*theScale)/2;
}
else {
    var theScale = Number(height/(theBounds[3] - theBounds[1]));
    horAdd = (width - (theBounds[2] - theBounds[0])*theScale)/2;
};
// scale;
activeDocument.resizeImage(new UnitValue(theScale*100, "%"), new UnitValue(theScale*100, "%"), undefined, ResampleMethod.AUTOMATIC);
// crop;
activeDocument.crop([theBounds[0]*theScale-leftPadding+horAdd, theBounds[1]*theScale-topPadding+verAdd, theBounds[2]*theScale+rightPadding-horAdd, theBounds[3]*theScale+bottomPadding-verAdd]);
app.preferences.rulerUnits = originalRulerUnits;
//resizeCanvas(width, height, widthUnit, heightUnit, topPadding, bottomPadding, leftPadding, rightPadding, paddingUnit, cropImage);
dialog.close();
};
dialog.show();
} else {alert ("no path selected")};
////// determine selected path //////
function selectedPath2020 () {
try {
var ref = new ActionReference();
ref.putProperty (stringIDToTypeID("property"), stringIDToTypeID("targetPathIndex")); 
ref.putEnumerated( charIDToTypeID("Dcmn"), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") ); 
var docDesc = executeActionGet(ref);
var theIndex = docDesc.getInteger(stringIDToTypeID("targetPathIndex"))+1;
//
var ref = new ActionReference();
ref.putIndex( charIDToTypeID("Path"), theIndex); 
var pathDesc = executeActionGet(ref);
var theKind = pathDesc.getEnumerationValue(stringIDToTypeID("kind"));
var theName = pathDesc.getString(stringIDToTypeID("pathName"));
//
return [theIndex, theKind, theName];
}
catch (e) {return undefined}
};

[c.pfaffenbichler]

Does the Script work for you? 

[jahid30096762iy1t]

its working but dont get me the final image size it's not working like Photoshop fits the image or canvas size need bit correction 

[c.pfaffenbichler]

It crops the area of the Path to the size and adds the padding. 

If you want something different you will have to actually explain what that is.