Generar Pdf con logos

Back/backendP-Educativa/app/Http/Controllers/PersonalizarController.php

@@ -16,7 +16,7 @@ class PersonalizarController extends Controller
 
 
  protected $nombrePeriodoActivo;
- 
+
 
    public function __construct(PeriodoService $periodoService)
 {
@@ -134,9 +134,9 @@ $carpetaBase = config('custom.s3_carpeta_base');
     }
 
     try {
-          
+
         $periodoService = new PeriodoService();
-        $carpetaPeriodo = $periodoService->obtenerPeriodoActivoNombre(); 
+        $carpetaPeriodo = $periodoService->obtenerPeriodoActivoNombre();
 
         $personalizar->PERMENSAJE = $request->mensajeBienvenida;
         $personalizar->PERNOMBRE = $request->nombreColegio;
@@ -248,23 +248,31 @@ $procesarImagen = function(?string $imageData, string $nombreArchivoBase, ?strin
 
 
 
-public function getPerLogo1()
+public function getPerLogo1Base64()
 {
     $personalizar = Personalizar::find(1);
     if ($personalizar && $personalizar->PERLOGO1) {
-        $url = Storage::disk('s3')->url($personalizar->PERLOGO1);
-        return response()->json(['PERLOGO1' => $url], 200);
+        $contenido = Storage::disk('s3')->get($personalizar->PERLOGO1);
+        $finfo = new \finfo(FILEINFO_MIME_TYPE);
+        $mime = $finfo->buffer($contenido);
+        $base64 = 'data:' . $mime . ';base64,' . base64_encode($contenido);
+
+        return response()->json(['PERLOGO1' => $base64], 200);
     }
     return response()->json(['PERLOGO1' => null], 404);
 }
 
 
-public function getPerLogo2()
+public function getPerLogo2Base64()
 {
     $personalizar = Personalizar::find(1);
     if ($personalizar && $personalizar->PERLOGO2) {
-        $url = Storage::disk('s3')->url($personalizar->PERLOGO2);
-        return response()->json(['PERLOGO2' => $url], 200);
+        $contenido = Storage::disk('s3')->get($personalizar->PERLOGO2);
+        $finfo = new \finfo(FILEINFO_MIME_TYPE);
+        $mime = $finfo->buffer($contenido);
+        $base64 = 'data:' . $mime . ';base64,' . base64_encode($contenido);
+
+        return response()->json(['PERLOGO2' => $base64], 200);
     }
     return response()->json(['PERLOGO2' => null], 404);
 }

Back/backendP-Educativa/routes/api.php

@@ -284,8 +284,8 @@ Route::middleware(['auth:sanctum'])->group(function () {
     Route::post('/eliminarArchivo', [RegistroAcademico::class, 'eliminarArchivo']);
     Route::post('/eliminarPerlogo', [PersonalizarController::class, 'eliminarPerlogo']);
 
-    Route::get('/personalizar/perlogo1', [PersonalizarController::class, 'getPerLogo1']);
-    Route::get('/personalizar/perlogo2', [PersonalizarController::class, 'getPerLogo2']);
+    Route::get('/personalizar/perlogo1', [PersonalizarController::class, 'getPerLogo1Base64']);
+    Route::get('/personalizar/perlogo2', [PersonalizarController::class, 'getPerLogo2Base64']);
 
 
 });

Front/src/app/modules/Padres/pages/registroAlumno/registroAlumno.component.ts

@@ -154,7 +154,6 @@ getAll() {
       });
     });
   }
-
   getRegistroStatus(idUsuario: string): string {
     const registro = this.errorEmpty.find(item => item.idAlumno === idUsuario);
     if (registro) {
@@ -183,34 +182,34 @@ getAll() {
   nombre(data: any, tipo: string) {
     tipo === 'ac' ? this.router.navigate(['/homePadres/registro', btoa(data)]) : this.router.navigate(['/homePadres/registroAd', btoa(data)]);
   }
-convertImageToBase64(url: string): Promise<string | null> {
-  return new Promise((resolve, reject) => {
-   if (!url) {
-      resolve(''); // Cadena vacía en vez de null
-      return;
-    }
-    const img = new Image();
-    img.crossOrigin = 'anonymous'; // importante para evitar problemas de CORS
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      canvas.width = img.width;
-      canvas.height = img.height;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) {
-        resolve(null);
-        return;
-      }
-      ctx.drawImage(img, 0, 0);
-      const dataURL = canvas.toDataURL('image/png'); // obtiene base64 con prefijo completo
-      resolve(dataURL);
-    };
-    img.onerror = (error) => {
-      console.error('Error cargando imagen:', url, error);
-      resolve(null); // Para que no falle toda la promesa si una imagen no carga
-    };
-    img.src = url;
-  });
-}
+// convertImageToBase64(url: string): Promise<string | null> {
+//   return new Promise((resolve, reject) => {
+//    if (!url) {
+//       resolve(''); // Cadena vacía en vez de null
+//       return;
+//     }
+//     const img = new Image();
+//     img.crossOrigin = 'anonymous'; // importante para evitar problemas de CORS
+//     img.onload = () => {
+//       const canvas = document.createElement('canvas');
+//       canvas.width = img.width;
+//       canvas.height = img.height;
+//       const ctx = canvas.getContext('2d');
+//       if (!ctx) {
+//         resolve(null);
+//         return;
+//       }
+//       ctx.drawImage(img, 0, 0);
+//       const dataURL = canvas.toDataURL('image/png'); // obtiene base64 con prefijo completo
+//       resolve(dataURL);
+//     };
+//     img.onerror = (error) => {
+//       console.error('Error cargando imagen:', url, error);
+//       resolve(null); // Para que no falle toda la promesa si una imagen no carga
+//     };
+//     img.src = url;
+//   });
+// }
 
 descargarPDF(id: string) {
 
@@ -223,32 +222,53 @@ descargarPDF(id: string) {
     let segundoNombre = data.FiDI_Nombre2 || '';
 
     const doc = new jsPDF();
+    const maxWidth = 50; // ancho máximo en mm
+const maxHeight = 40; // alto máximo en mm
+
+const scaleImage = (img: HTMLImageElement) => {
+  let w = img.width;
+  let h = img.height;
+  const ratio = w / h;
+
+  if (w > maxWidth) {
+    w = maxWidth;
+    h = w / ratio;
+  }
+  if (h > maxHeight) {
+    h = maxHeight;
+    w = h * ratio;
+  }
+  return { w, h };
+};
+
     var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
     var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
 
     // doc.addImage("assets/img/Encabezado-PDF.jpg", "JPEG", 6, 10, pageWidth - 8, 27);
-
- // 1. Título principal: Nombre del colegio
-// 0. Cargar las imágenes antes de usarlas
-Promise.all([
-  this.convertImageToBase64(this.url1 ?? ''),
-  this.convertImageToBase64(this.url2?? ''),
-]).then(([imgLeft, imgRight]) => {
-  if (imgLeft) {
-    doc.addImage(imgLeft, 'PNG', 15, 10, 30, 30);
+ const loadImage = (url: string | null): Promise<HTMLImageElement | null> => {
+      return new Promise(resolve => {
+        if (!url) resolve(null);
+        const img = new Image();
+        img.src = url!;
+        img.onload = () => resolve(img);
+        img.onerror = () => resolve(null);
+      });
+    };
+ Promise.all([loadImage(this.url1), loadImage(this.url2)]).then(([img1, img2]) => {
+  if (img1) {
+    const { w, h } = scaleImage(img1);
+    doc.addImage(img1, 'PNG', 10, 10, w, h);
   }
-  if (imgRight) {
-    doc.addImage(imgRight, 'PNG', pageWidth - 45, 10, 30, 30);
+  if (img2) {
+    const { w, h } = scaleImage(img2);
+    doc.addImage(img2, 'PNG', pageWidth - w - 10, 10, w, h); // logo derecho
   }
-
-  // 1. Título (Nombre del colegio)
   doc.setFontSize(14);
   doc.setFont('helvetica', 'bold');
   doc.text(this.nombreColegio, pageWidth / 2, 20, { align: 'center' });
 
   // 2. Línea horizontal
-  doc.setLineWidth(0.5);
-  doc.line(10, 24, pageWidth - 10, 24);
+
 
   // 3. Eslogan
   doc.setFontSize(12);
@@ -419,23 +439,25 @@ Promise.all([
     // Añadir nueva página para firmas y leyendas
     doc.addPage();
 
-    if (imgLeft) {
-    doc.addImage(imgLeft, 'PNG', 15, 10, 30, 30);
-  }
-  if (imgRight) {
-    doc.addImage(imgRight, 'PNG', pageWidth - 45, 10, 30, 30);
-  }
+
 
 
 
 // 1. Título (Nombre del colegio)
+  if (img1) {
+    const { w, h } = scaleImage(img1);
+    doc.addImage(img1, 'PNG', 10, 10, w, h);
+  }
+  if (img2) {
+    const { w, h } = scaleImage(img2);
+    doc.addImage(img2, 'PNG', pageWidth - w - 10, 10, w, h); // logo derecho
+  }
 doc.setFontSize(14);
 doc.setFont('helvetica', 'bold');
 doc.text(this.nombreColegio, pageWidth / 2, 20, { align: 'center' });
 
 // 2. Línea horizontal
-doc.setLineWidth(0.5);
-doc.line(10, 24, pageWidth - 10, 24);
+
 
 // 3. Eslogan
 doc.setFontSize(12);
@@ -484,23 +506,25 @@ doc.text(this.mensajeBienvenida, pageWidth / 2, 38, { align: 'center' });
       // -----------------------------------------------------------------------------------------------------------------------------------------------------------
       //segunda página
       doc.addPage();
-        if (imgLeft) {
-    doc.addImage(imgLeft, 'PNG', 15, 10, 30, 30);
-  }
-  if (imgRight) {
-    doc.addImage(imgRight, 'PNG', pageWidth - 45, 10, 30, 30);
-  }
+
 
 
 
 // 1. Título (Nombre del colegio)
+  if (img1) {
+    const { w, h } = scaleImage(img1);
+    doc.addImage(img1, 'PNG', 10, 10, w, h);
+  }
+  if (img2) {
+    const { w, h } = scaleImage(img2);
+    doc.addImage(img2, 'PNG', pageWidth - w - 10, 10, w, h); // logo derecho
+  }
+
 doc.setFontSize(14);
 doc.setFont('helvetica', 'bold');
 doc.text(this.nombreColegio, pageWidth / 2, 20, { align: 'center' });
 
 // 2. Línea horizontal
-doc.setLineWidth(0.5);
-doc.line(10, 24, pageWidth - 10, 24);
 
 // 3. Eslogan
 doc.setFontSize(12);
@@ -647,23 +671,23 @@ doc.text(this.mensajeBienvenida, pageWidth / 2, 38, { align: 'center' });
       // -----------------------------------------------------------------------------------------------------------------------------------------------------------
       //tercera página
       doc.addPage();
-        if (imgLeft) {
-    doc.addImage(imgLeft, 'PNG', 15, 10, 30, 30);
-  }
-  if (imgRight) {
-    doc.addImage(imgRight, 'PNG', pageWidth - 45, 10, 30, 30);
-  }
 
 
 
+  if (img1) {
+    const { w, h } = scaleImage(img1);
+    doc.addImage(img1, 'PNG', 10, 10, w, h);
+  }
+  if (img2) {
+    const { w, h } = scaleImage(img2);
+    doc.addImage(img2, 'PNG', pageWidth - w - 10, 10, w, h); // logo derecho
+  }
 // 1. Título (Nombre del colegio)
 doc.setFontSize(14);
 doc.setFont('helvetica', 'bold');
 doc.text(this.nombreColegio, pageWidth / 2, 20, { align: 'center' });
 
-// 2. Línea horizontal
-doc.setLineWidth(0.5);
-doc.line(10, 24, pageWidth - 10, 24);
+
 
 // 3. Eslogan
 doc.setFontSize(12);
@@ -732,23 +756,21 @@ doc.text(this.mensajeBienvenida, pageWidth / 2, 38, { align: 'center' });
       // -----------------------------------------------------------------------------------------------------------------------------------------------------------
       //cuarta página
       doc.addPage();
-      if (imgLeft) {
-    doc.addImage(imgLeft, 'PNG', 15, 10, 30, 30);
-  }
-  if (imgRight) {
-    doc.addImage(imgRight, 'PNG', pageWidth - 45, 10, 30, 30);
-  }
-
 
 
+  if (img1) {
+    const { w, h } = scaleImage(img1);
+    doc.addImage(img1, 'PNG', 10, 10, w, h);
+  }
+  if (img2) {
+    const { w, h } = scaleImage(img2);
+    doc.addImage(img2, 'PNG', pageWidth - w - 10, 10, w, h); // logo derecho
+  }
 // 1. Título (Nombre del colegio)
 doc.setFontSize(14);
 doc.setFont('helvetica', 'bold');
 doc.text(this.nombreColegio, pageWidth / 2, 20, { align: 'center' });
 
-// 2. Línea horizontal
-doc.setLineWidth(0.5);
-doc.line(10, 24, pageWidth - 10, 24);
 
 // 3. Eslogan
 doc.setFontSize(12);
@@ -853,23 +875,23 @@ doc.text(`${data.FiDI_Sexo === 'F' ? 'FEMENINO' : 'MASCULINO'}`, 172, 73);
       // -----------------------------------------------------------------------------------------------------------------------------------------------------------
       //quinta página
       doc.addPage();
-  if (imgLeft) {
-    doc.addImage(imgLeft, 'PNG', 15, 10, 30, 30);
-  }
-  if (imgRight) {
-    doc.addImage(imgRight, 'PNG', pageWidth - 45, 10, 30, 30);
-  }
 
 
 
+  if (img1) {
+    const { w, h } = scaleImage(img1);
+    doc.addImage(img1, 'PNG', 10, 10, w, h);
+  }
+  if (img2) {
+    const { w, h } = scaleImage(img2);
+    doc.addImage(img2, 'PNG', pageWidth - w - 10, 10, w, h); // logo derecho
+  }
 // 1. Título (Nombre del colegio)
 doc.setFontSize(14);
 doc.setFont('helvetica', 'bold');
 doc.text(this.nombreColegio, pageWidth / 2, 20, { align: 'center' });
 
-// 2. Línea horizontal
-doc.setLineWidth(0.5);
-doc.line(10, 24, pageWidth - 10, 24);
+
 
 // 3. Eslogan
 doc.setFontSize(12);
@@ -926,10 +948,11 @@ doc.text(`Página 5 de 5`, pageWidth - 30, pageHeight - 10);
 
       // Descarga el PDF
       doc.save(`RegistroAlumno_${data.idAlumno}.pdf`);
+
     })
     });
   }
 
-}
 
+}