0

introducir la descripción de la imagen aquíLo que necesito es hcaer un boton para poder descragar una imagen de un codigo de barras, que ya muestro pero lo quiero descargar, hay manera de realizar eso??, se los agradeceria si hubiera un metodo o si no hay igual para saberlo.

<script src="https://s3.amazonaws.com/cash_payment_barcodes/sandbox_reference.png">
      </script>
      <script>
            function download() {
                  axios({
                        url: 'https://s3.amazonaws.com/cash_payment_barcodes/sandbox_reference.png',
                        method: 'GET',
                        responseType: 'blob'
                  })
                        .then((response) => {
                              const url = window.URL
                                    .createObjectURL(new Blob([response.data]));
                              const link = document.createElement('a');
                              link.href = url;
                              link.setAttribute('download', 'sandbox_reference.png');
                              document.body.appendChild(link);
                              link.click();
                              document.body.removeChild(link);
                        })
            }

      </script>
<!DOCTYPE html>
<html>

<head>
      <title>How to download files using JavaScript</title>
</head>

<body>
      <button onclick="download()">
            Download Image
      </button>
      
</body>

</html>

5
  • Se puede realizar? Sí, se puede. Saludos
    – Arriel
    Commented el 11 ago. 2022 a las 21:59
  • En esta pregunta podes encontrar una forma de resolver es.stackoverflow.com/q/27143/155688 Commented el 11 ago. 2022 a las 22:26
  • @Arriel gracias se nota que no eres una buena persona.
    – Abdiel
    Commented el 11 ago. 2022 a las 22:34
  • @NarcisoAifuz gracias, si ahi encontre algo que me ayudo un poco te agradesco.
    – Abdiel
    Commented el 11 ago. 2022 a las 22:34
  • Abdiel, te explico: No eres el único usuario de este sitio, y la idea es que otros usuarios logren encontrar respuestas a preguntas que ellos mismos tengan. Tal vez a tu ego le duela, pero tu pregunta está escrita de una manera que es de poca utilidad a este sitio y sus usuarios. Se puede realizar un botón? Sí, claro, se puede. Pero no puede ser el título de la pregunta. El título debe describir el problema al que te enfrentas. En el centro de ayuda hay sugerencias. Léelas. Y pues, soy mala persona? Es tu opinión. El título no es útil? Es un hecho. No responderé más. Saludos.
    – Arriel
    Commented el 12 ago. 2022 a las 3:44

1 respuesta 1

1

Les dejo mi respuesta de como pude solucionar este problema, ojala alguien le ayude. Utilice un formulario oculto en donde este recibe la url de la imagen, la manda por metodo POST para despues en el archivo de PHP ahi convierte la image/png a una imagen y la puede mostrar, ojala les ayude asi como ami me ayudo para sacar este problema.

$.ajax({
        method:"POST",
        url:"../ajax/pagar_recarga_oxxo_ajax.php",
        data:jsonData,
        success:function(data){
          var respuesta = JSON.parse(data);
          // console.log(respuesta);

          if(respuesta["responsecode"] == "ERROR"){
            $(".texto-mensaje").text(respuesta["responseobject"]["message"]);
            $("#msj").modal("toggle");

            closeMessageOverlay();
          }
          else if(respuesta["responsecode"] == "OK"){
            var resultados = respuesta["responseobject"]["datospago"];

            var codigoBarras = resultados["codigobarras"];
            var fechaExpiracion = resultados["fechaexpiracion"];
            var importePago = resultados["importe"];
            var referenciaOxxo = resultados["referencia"];
            // console.log(codigoBarras);


            $(".referenciaOxxo").text("Referencia: "+referenciaOxxo);
            $(".fechaExpOxxo").text("Expira: "+fechaExpiracion);
            $(".importeOxoo").text("Importe: "+importePago);
            $("#formDescargarCodigoOxxo #imagenOxxo").val(codigoBarras);
            $("#formDescargarCodigoOxxo #referenciaOxxo").val(referenciaOxxo);


            var canvas = document.getElementById("codigoOxxo");
            var ctx = canvas.getContext("2d");
            var img = new Image();
            img.src = codigoBarras;

            img.onload = function(){
              ctx.drawImage(img, 25, 25, 250, 100);
            }

            var botonDescargarImg =
            "<button type='button' class='form-btn-cancelar' onclick='descargarCodigoOxxo();'>Descargar"+
            "</button>";

            $(".btnRecargaOxxo").html(botonDescargarImg);
            
            $(".contenedorRecargar").addClass("hide");
          }
        }
      });
      
      
      function descargarCodigoOxxo(){ $("#formDescargarCodigoOxxo").submit(); }
<div class="col-lg-12 col-md-5 padding-off metodosPago">
              <p class="referenciaOxxo"></p>
              <canvas id="codigoOxxo"></canvas>
              <p class="fechaExpOxxo"></p>
              <p class="importeOxoo"></p>
            </div>
            <div class="col-lg-12 col-md-5 padding-off btnRecargaOxxo"></div>
            <form class="formularioCamposOcultos" name="formDescargarCodigoOxxo" id="formDescargarCodigoOxxo" action="../ajax/codigoOxxo.php" method="POST">
              <input type="text" name="imagenOxxo" id="imagenOxxo">
              <input type="text" name="referenciaOxxo" id="referenciaOxxo">
            </form>

<?php
  $imagenOxxo     = $_POST["imagenOxxo"];
  $referenciaOxxo = $_POST["referenciaOxxo"];

  $codigoBarras   = imagecreatefrompng($imagenOxxo);
  $codigoBarras   = imagescale($codigoBarras, 430, 170);
  $image          = imagecreatefrompng("baseOxxo.png");
  $color          = imagecolorallocate($image, 0, 0, 0);

  imagecopymerge($image, $codigoBarras, 35, 35, 0, 0, 430, 170, 100);
  imagettftext($image, 20, 0, 150, 235, $color, "arial.ttf", $referenciaOxxo);

  ob_start();
  imagepng($image);
  $contents = ob_get_contents();
  ob_end_clean();

  $codigoOxxo = "data:image/png;base64,".base64_encode($contents);

  imagedestroy($image);

  header('Content-Description: File Transfer');
  header('Content-Type: application/octet-stream');
  header('Content-Disposition: attachment; filename=OXXO_'.$referenciaOxxo.'.png');
  header('Content-type: image/png');
  header('Content-Transfer-Encoding: binary');
  header('Expires: 0');
  header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
  header('Pragma: public');
  ob_clean();
  flush();

  readfile($codigoOxxo);
?>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.