Merge pull request #113 from muench-dev/bugfix/handle-large-images

fix: Handle large images by resizing before upload (#112)

Author: cmuench

nodes/Bluesky/V2/postOperations.ts

@@ -1,4 +1,5 @@
 import { AtpAgent, RichText } from '@atproto/api';
+import sharp from 'sharp';
 import { INodeExecutionData, INodeProperties } from 'n8n-workflow';
 import { getLanguageOptions } from './languages';
 import ogs from 'open-graph-scraper';
@@ -176,6 +177,19 @@ export const postProperties: INodeProperties[] = [
 	},
 ];
 
+async function resizeImageIfNeeded(imageBuffer: Buffer, maxWidth: number, maxSizeBytes: number): Promise<Buffer> {
+	if (imageBuffer.length > maxSizeBytes) {
+		try {
+			return await sharp(imageBuffer)
+				.resize({ width: maxWidth, withoutEnlargement: true, fit: 'inside' })
+				.toBuffer();
+		} catch (error: any) {
+			console.warn(`Failed to resize image: ${error.message}. Returning original image.`);
+		}
+	}
+	return imageBuffer;
+}
+
 export async function postOperation(
 	agent: AtpAgent,
 	postText: string,
@@ -201,7 +215,10 @@ export async function postOperation(
 
 	if (websiteCard?.uri) {
 		let thumbBlob = undefined;
+		const imageSizeLimit = 976.56 * 1024; // 976.56KB in bytes
+		const maxWidth = 1000;
 		if (websiteCard.thumbnailBinary) {
+			websiteCard.thumbnailBinary = await resizeImageIfNeeded(websiteCard.thumbnailBinary, maxWidth, imageSizeLimit);
 			const uploadResponse = await agent.uploadBlob(websiteCard.thumbnailBinary, {
 				encoding: 'image/png', // Adjust based on expected image type
 			});
@@ -212,27 +229,30 @@ export async function postOperation(
 			try {
 				const ogsResponse = await ogs({ url: websiteCard.uri });
 				if (ogsResponse.error) {
-					throw new Error(`Error fetching Open Graph tags: ${ogsResponse.error}`);
-				}
-				if (ogsResponse.result.ogImage) {
-					const imageDataResponse = await fetch(ogsResponse.result.ogImage[0].url);
-					if (!imageDataResponse.ok) {
-					}
-					const thumbBlobArrayBuffer = await imageDataResponse.arrayBuffer();
-					thumbBlob = Buffer.from(thumbBlobArrayBuffer);
-					const { data } = await agent.uploadBlob(thumbBlob);
-					thumbBlob = data.blob;
-				}
-				if (ogsResponse.result.ogTitle) {
-					websiteCard.title = ogsResponse.result.ogTitle;
-				}
-				if (ogsResponse.result.ogDescription) {
-					websiteCard.description = ogsResponse.result.ogDescription;
+					console.error(`Error fetching Open Graph tags: ${ogsResponse.error}`);
 				} else {
-					websiteCard.description = '';
+					if (ogsResponse.result.ogImage) {
+						const imageUrl = ogsResponse.result.ogImage[0].url;
+						const imageDataResponse = await fetch(imageUrl);
+						if (imageDataResponse.ok) {
+							const thumbBlobArrayBuffer = await imageDataResponse.arrayBuffer();
+							let thumbBuffer = Buffer.from(thumbBlobArrayBuffer);
+							thumbBuffer = await resizeImageIfNeeded(thumbBuffer, maxWidth, imageSizeLimit);
+							const { data } = await agent.uploadBlob(thumbBuffer);
+							thumbBlob = data.blob;
+						}
+					}
+					if (ogsResponse.result.ogTitle) {
+						websiteCard.title = ogsResponse.result.ogTitle;
+					}
+					if (ogsResponse.result.ogDescription) {
+						websiteCard.description = ogsResponse.result.ogDescription;
+					} else {
+						websiteCard.description = '';
+					}
 				}
 			} catch (err: any) {
-				throw new Error(`Failed to fetch Open Graph tags for URL '${websiteCard.uri}': ${err?.message || err}`);
+				console.error(`Failed to fetch Open Graph tags for URL '${websiteCard.uri}': ${err?.message || err}`);
 			}
 		}