feat: compress image

README.MD

@@ -6,8 +6,12 @@ ComfyUI Image Pin 是一个 ComfyUI 的插件，允许您在 ComfyUI 工作流
 
 ### 功能
 
+- 钉住图片并转换为Base64字符串嵌入到工作流中
 ![example](./example/1.png)
 
+- [New❗] 支持压缩为WebP格式的Base64字符串
+![example](./example/3.png)
+
 #### 原理
 
 原生节点不会嵌入到工作流中，而是保存在ComfyUI根目录的input文件夹中，因此你导出的JSON不会带有任何图片

image_pin.py

@@ -29,7 +29,11 @@ class ImagePin:
     FUNCTION = "load_image"
 
     def load_image(self, image, image_data):
-        image_data = base64.b64decode(image_data.split(",")[1])
+        if image_data.startswith('data:image/webp;base64,'):
+            image_data = base64.b64decode(image_data.split(",")[1])
+        else:
+            image_data = base64.b64decode(image_data.split(",")[1])
+
         i = Image.open(BytesIO(image_data))
         i = ImageOps.exif_transpose(i)
         image = i.convert("RGB")

js/image_pin.js

@@ -11,6 +11,7 @@ app.registerExtension({
 	nodeCreated(node, app) {
 		if (node.comfyClass === "ImagePin") {
 			let w = node.widgets.find(obj => obj.name === 'image_data');
+			let w_i = node.widgets.find(obj => obj.name === 'image');
 			w.hidden = true;
 			w.disabled = true;
 
@@ -32,6 +33,45 @@ app.registerExtension({
 				}
 			});
 
+			const compressButton = node.addWidget("button", "👉 Compress (Recommended!) 👈", null, () => {
+				if (node.imgs && node.imgs[0]) {
+					const img = node.imgs[0];
+					const canvas = document.createElement('canvas');
+					const ctx = canvas.getContext('2d');
+
+					const maxSize = 512;
+					let width = img.width;
+					let height = img.height;
+
+					if(width <= maxSize && height <= maxSize){
+						console.log("Image is already small enough.");
+						return;
+					}
+
+					if (width > height) {
+						if (width > maxSize) {
+							height *= maxSize / width;
+							width = maxSize;
+						}
+					} else {
+						if (height > maxSize) {
+							width *= maxSize / height;
+							height = maxSize;
+						}
+					}
+
+					canvas.width = width;
+					canvas.height = height;
+					ctx.drawImage(img, 0, 0, width, height);
+
+					const webpData = canvas.toDataURL('image/webp', 0.6);
+					w.value = webpData;
+					w_i.value = "#DECODE_FROM_BASE64"
+
+					console.log("Image compressed.");
+				}
+			});
+
 			let set_img_act = (v) => {
 				node._img = v;
 				var canvas = document.createElement('canvas');