You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
platform = "custom", // string: e.g., "instagram_square", "facebook_post", "custom"
customWidth = 800, // number: target width if platform is "custom"
customHeight = 600, // number: target height if platform is "custom"
fit = "cover", // string: "cover" or "contain"
backgroundColor = "transparent" // string: CSS color for "contain" mode background
) {
const platformSizes = {
"instagram_square": { width: 1080, height: 1080 },
"instagram_portrait": { width: 1080, height: 1350 },
"instagram_landscape": { width: 1080, height: 566 },
"instagram_story": { width: 1080, height: 1920 },
"facebook_post": { width: 1200, height: 630 },
"facebook_cover_desktop": { width: 820, height: 312 },
"twitter_header": { width: 1500, height: 500 },
"twitter_post_16_9": { width: 1200, height: 675 },
"twitter_post_1_1": { width: 1080, height: 1080 },
"linkedin_post_landscape": { width: 1200, height: 627 },
"linkedin_post_square": { width: 1080, height: 1080 },
"linkedin_cover": { width: 1584, height: 396 }, // Personal profile cover
"linkedin_company_cover": { width: 1128, height: 191 }, // Company page cover
"pinterest_pin_2_3": { width: 1000, height: 1500 },
"pinterest_pin_1_1": { width: 1000, height: 1000 },
"youtube_thumbnail": { width: 1280, height: 720 },
// "custom" is not a key here; it's handled by the logic below if platformConfig is not found.
};
let targetWidth, targetHeight;
// Normalize platform string (lowercase, trim whitespace)
const normalizedPlatform = typeof platform === 'string' ? platform.toLowerCase().trim() : "custom";
const platformConfig = platformSizes[normalizedPlatform];
if (platformConfig) {
targetWidth = platformConfig.width;
targetHeight = platformConfig.height;
} else {
// Handle "custom" platform or any unknown platform string
if (normalizedPlatform !== "custom") {
console.warn(`Unknown platform: '${platform}'. Using custom dimensions specified or default custom dimensions.`);
}
let cw = Number(customWidth); // Coerce to number, as parameters can be passed as strings from HTML inputs
let ch = Number(customHeight);
// Validate and use custom dimensions. Fallback to default 800x600 if invalid.
targetWidth = (Number.isFinite(cw) && cw > 0) ? cw : 800;
targetHeight = (Number.isFinite(ch) && ch > 0) ? ch : 600;
}
const canvas = document.createElement('canvas');
canvas.width = targetWidth;
canvas.height = targetHeight;
const ctx = canvas.getContext('2d');
// Use naturalWidth/naturalHeight for intrinsic image dimensions. Fallback to width/height.
const sWidth = originalImg.naturalWidth || originalImg.width;
const sHeight = originalImg.naturalHeight || originalImg.height;
// Check if the image has valid dimensions
if (sWidth === 0 || sHeight === 0) {
console.error("Original image dimensions are zero. Ensure the image is loaded properly before calling processImage.");
// Draw an error message on the canvas
ctx.fillStyle = '#CCCCCC'; // Light gray background
ctx.fillRect(0, 0, targetWidth, targetHeight);
ctx.fillStyle = '#000000'; // Black text
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
try {
// Attempt to make font size somewhat responsive to canvas size
const fontSize = Math.min(targetWidth / 15, targetHeight / 8, 24);
ctx.font = `${fontSize}px Arial`;
// Add max width to fillText for text wrapping if supported (most modern browsers do)
ctx.fillText("Error: Image invalid or not loaded.", targetWidth / 2, targetHeight / 2, targetWidth * 0.9);
} catch (e) {
// Fallback if font setting or advanced fillText fails
ctx.fillText("Error: Image invalid.", targetWidth / 2, targetHeight / 2);
}
return canvas;
}
// Enable image smoothing for better quality when scaling
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
// Normalize fit mode string
const normalizedFit = typeof fit === 'string' ? fit.toLowerCase().trim() : "cover";
if (normalizedFit === "contain") {
// Handle background color for "contain" mode
const lowerBgColor = typeof backgroundColor === 'string' ? backgroundColor.toLowerCase().trim() : 'transparent';
if (lowerBgColor && lowerBgColor !== 'transparent') {
ctx.fillStyle = backgroundColor; // Use original backgroundColor string for the color value
ctx.fillRect(0, 0, targetWidth, targetHeight);
}
// If backgroundColor is "transparent" or invalid, canvas remains transparent by default.
// Calculate scaling factor to fit the image within target dimensions while maintaining aspect ratio
const scaleFactorWidth = targetWidth / sWidth;
const scaleFactorHeight = targetHeight / sHeight;
const scaleFactor = Math.min(scaleFactorWidth, scaleFactorHeight);
// Calculate rendered dimensions and position to center the image
const finalRenderWidth = sWidth * scaleFactor;
const finalRenderHeight = sHeight * scaleFactor;
const dx = (targetWidth - finalRenderWidth) / 2;
const dy = (targetHeight - finalRenderHeight) / 2;
ctx.drawImage(originalImg, 0, 0, sWidth, sHeight, dx, dy, finalRenderWidth, finalRenderHeight);
} else { // Default to "cover" mode, also catches any unknown 'fit' values
if (normalizedFit !== "cover") {
console.warn(`Unknown fit mode: '${fit}'. Defaulting to 'cover'.`);
}
const sRatio = sWidth / sHeight;
const tRatio = targetWidth / targetHeight;
let sx = 0, sy = 0, sCropWidth = sWidth, sCropHeight = sHeight;
// Determine cropping dimensions and source position
if (sRatio > tRatio) { // Source image is wider than target (landscape vs portrait/square "cover")
sCropWidth = sHeight * tRatio; // Crop width to match target aspect ratio
sx = (sWidth - sCropWidth) / 2; // Center horizontally
} else if (sRatio < tRatio) { // Source image is taller than target (portrait vs landscape/square "cover")
sCropHeight = sWidth / tRatio; // Crop height to match target aspect ratio
sy = (sHeight - sCropHeight) / 2; // Center vertically
}
// If sRatio === tRatio, no cropping is needed; sx, sy remain 0, sCropWidth/Height remain sWidth/sHeight.
ctx.drawImage(originalImg, sx, sy, sCropWidth, sCropHeight, 0, 0, targetWidth, targetHeight);
}
return canvas;
}Apply Changes
