0

Hola a todos y desde ya gracias por la colaboración que me puedan brindar, heredé el mantenimiento de un sistema para entidades deportivas que entre otras muchas funciones les genera a sus asociados un carnet que tiene un logo, foto, datos personales y un código QR todo con código canvas js puro. Por la pandemia, esto quedo inactivo desde el comienzo de la misma hasta hace un mes aprox. por supuesto sin ningún mantenimiento ni actualización por cambios de versiones en el soft de base (php) como para ubicarlos. Se instalo nuevamente y esta función dejo de generar el pdf correctamente, la foto no toma el tamaño correcto (mucho mas grande) tapando el código QR en la vista previa y tampoco toma la plantilla con el fondo del carnet en el pdf, solamente imprimiendo los datos del socio. Les paso el código que estaba funcionando ok hasta antes del cambio de hosting. Los cambios que realice fueron corregir los paths hardcodeados y cambiar en el controlador de php las llaves en los arreglos x corchetes con lo que todo comenzó a funcionar, salvo la generación correcta del pdf del carnet. Desde ya muchisimas gracias por la atencion que le puedan brindar a la presente consulta.

Dejo el código js con el error $scope.carnet = document.getElementById('carnet-canvas'), $scope.ccarnet = $scope.carnet.getContext('2d');

  $scope.generarCarnet = function (socioImg) {
    base_image = new Image();
    base_image.src = 'https://clubangloviejo.com/gestion/styles/images/anglo_carnet.png';
    $scope.ccarnet.clearRect(0, 0, $scope.carnet.width, $scope.carnet.height)
    base_image.onload = function(){
      $scope.ccarnet.drawImage(base_image, 0, 0, $scope.carnet.width, $scope.carnet.height);

      var qr = new QRCode(0, 0, 'NUMBER');
      if ($scope.ConsultaSocioDni) {
        qr.addData($scope.ConsultaSocioDni);
        qr.make();
        var modules = qr.getModuleCount();
        var size = 114;
        var tile = size / modules;
        for (var row = 0; row < modules; row++) {
          for (var col = 0; col < modules; col++) {
            var w = (Math.ceil((col + 1) * tile) - Math.floor(col * tile)),
                h = (Math.ceil((row + 1) * tile) - Math.floor(row * tile));
                $scope.ccarnet.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';
                $scope.ccarnet.fillRect(16 + Math.round(col * tile), 140 + Math.round(row * tile), w, h);
          }
        }
        $scope.ccarnet.font = "16px Trebuchet MS";
        $scope.ccarnet.fillStyle = "grey";
        $scope.ccarnet.fillText('Socio Nº:', 150, 160);       
        $scope.ccarnet.font = "20px Trebuchet MS";
        $scope.ccarnet.fillStyle = "black";
        $scope.ccarnet.fillText($scope.ConsultaSocioSid, 226, 161);      
        $scope.ccarnet.font = "18px Trebuchet MS";
        $scope.ccarnet.fillText($scope.ConsultaSocioApellido + ' ' + $scope.ConsultaSocioNombre, 150, 190);
        $scope.ccarnet.font = "16px Trebuchet MS";
        $scope.ccarnet.fillStyle = "grey";
        $scope.ccarnet.fillText('DNI:', 150, 220);   
        $scope.ccarnet.font = "20px Trebuchet MS";
        $scope.ccarnet.fillStyle = "black";
        $scope.ccarnet.fillText($scope.ConsultaSocioDni, 150, 250);       
      }
      
    }
    socio_image = new Image();
    socio_image.src = socioImg;
    socio_image.onload = function(){
      $scope.ccarnet.drawImage(socio_image, 14, 11, 114, 114);
    }

  }

  $scope.$watch('myCroppedImage', function(newValue, oldValue) {
    $scope.generarCarnet(newValue)
  });

  $scope.imprimirCarnet = function () {
    var imgData = $scope.carnet.toDataURL("image/jpeg", 1.0);
    var pdf = new jsPDF('l', 'mm', [85, 54]);

    pdf.addImage(imgData, 'JPEG', 0, 0, 85, 54);
    pdf.save("carnet " + $scope.ConsultaSocioApellido + ' ' + $scope.ConsultaSocioNombre + ' ' + $scope.ConsultaSocioDni + ".pdf");
  }

}]);
10
  • Hola bienvenido a Stackoverflow, por favor has el recorrido de bienvenida para entender cómo funcionamos y de paso ganar tu primer medalla. Te recomiendo que leas Cómo preguntar para que tu pregunta sea mejor recibida. Debes colocar el código de lo que hayas intentado hasta el momento. Te sugiero que leas ejemplo mínimo verificable para que sea más fácil entender lo que buscas. Recuerda que debes demostrar que has investigado previamente antes de recurrir a preguntar. Saludos el 27 nov. 2021 a las 22:21
  • OK Andres, como veras la pregunta entiendo que reune todos los requisitos planteados. Muchas gracias el 29 nov. 2021 a las 11:11
  • Hola Luis, debes colocar el código relevante a tu problema dentro de la pregunta. Si lees Cómo preguntar, puedes notar que dice "Incluye solo el código suficiente para permitir a otros reproducir el problema". No nos es de mucha ayuda que nos pases un link con todo el código de tu aplicación. Aplica lo mismo para imágenes, los links y las imágenes pueden "romperse" en cambio, el código dentro de la pregunta no. Saludos el 29 nov. 2021 a las 13:47
  • Puedes mirar solo el código de la aplicación esta en el archivo carnet.js no me dejo publicar el codigo de otra forma en forma legible. Gracias el 29 nov. 2021 a las 21:33
  • Aquí puedes leer sobre cómo formatear el código -> stackoverflow.com/editing-help#code por último, quiero recalcar que estas recomendaciones son para que podamos ayudarte. El sitio se maneja con pautas y reglas para que todo sea mas fácil. Por lo tanto, agrega el código en dónde tienes el problema. Saludos el 29 nov. 2021 a las 21:38

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.