0

Buenas noches estaba checando varias formas de descargar una imagen en jquery con c#, pero el punto que las dos opciones que encontré no me permiten descargar el archivo. En la primera que vi con download pero al momento de darle clic al boton se descargaba pero me decía que el formato no era el que se ocupaba para ver la imagen. "Parece que el formato de este archivo no es compatible"

como se muestra en el siguiente enlace https://jsfiddle.net/Socramg/1o9oec7r/1/

y el que hice me manda pero amplia la imagen no la descarga por default, solo la muestra en una ventana aparte. Alguien me podría ayudar o orientar. De antemano gracias.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
          <p>LA is always so much fun!</p>
          <button class="btnDescarga">Descargar</button>
          <a src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" download="cute.jpg">
  descargar
</a>
        </div>
      </div>

      <div class="item">

        <img src="https://educacion30.b-cdn.net/wp-content/uploads/2019/02/girasoles-978x652.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Chicago</h3>
          <p>Thank you, Chicago!</p>
          <a  id="download" href="https://educacion30.b-cdn.net/wp-content/uploads/2019/02/girasoles-978x652.jpg" download="cute.jpg">
  descargar
</a>
        </div>
      </div>
    
      <div class="item">
        <img src="https://www.rdstation.com/blog/wp-content/uploads/sites/2/2017/09/thestocks.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>New York</h3>
          <p>We love the Big Apple!</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script type="text/javascript">
var download = document.getElementById("download");

download.addEventListener("click", function() {
  var image = document.getElementById("miCanvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'application/force-download');
  download.setAttribute("href", image);
});
</script>
</body>
</html>
3
  • Pero las imágenes están en tu servidor o en otro??
    – Yussef
    Commented el 16 nov. 2022 a las 3:26
  • ahi las saco de internete con un url de internet, pero en la version que yo queria ocupar la tengo en una base de datos y la convieron en base64 Commented el 16 nov. 2022 a las 3:36
  • Puedes poner el ejemplo de una imagen en base64 de las que tengas?
    – Yussef
    Commented el 16 nov. 2022 a las 3:42

2 respuestas 2

1

Dices que tienes las imágenes en base64, entonces es colocar esa imagen en el atributo href

<a download="gatos.png" href="data:image/png;base64, .... " width="250" />
<img src="data:image/png;base64, ...." />
</a>

Lo otro puede ser algo como esto:

<a onclick="descargar(this,'gato.png')" href="#">
    <img src="data:image/png;base64, .... />
</a>

<script>
function descargar(el,fileName){
    let img = el.querySelector("img");
    fetch(img.src)
        .then(function (response) {
            return response.blob();
        })
        .then(function (blob) {
            let blobUrl = URL.createObjectURL(blob);
            const anchorElement = document.createElement('a');
            anchorElement.href = blobUrl;
            if (fileName) {
                anchorElement.download = fileName;
            }
            anchorElement.click();

        });
}
</script>
3
  • en la parte de onclic donde viene el href ahi no va tambien el enlace de imagen data: base64? Commented el 16 nov. 2022 a las 4:19
  • En el onclick va this como primer argumento (siempre) y como segundo el nombre de la imagen
    – Yussef
    Commented el 16 nov. 2022 a las 4:21
  • muchas gracias me quedo con lo primero , según yo ya había intentado con algo similar ( y digo similar porque no me quedo me mandaba en blanco ) xp supongo no lo hice bien , muchas gracias n.n Commented el 16 nov. 2022 a las 4:28
0

Con el comentario de yussef pude solucionarlo , solo que igual yo lo manejo en lenguaje c# pero para esto necesitaba jquery o html ya que lo estaba ocupando en esta parte del codigo para poder visualizar un slider.

foreach (CDocumento lvardoc in doc)
                        {
                            CDocumento obj = new CDocumento();
                            obj.lstrFst135_DocName = lvardoc.lstrFst135_DocName.ToString();
                            obj.lsrFst135_DocByte = lvardoc.lsrFst135_DocByte as byte[];
                            Session["lstrImagenes"] = lstrImagenes;

                            
                            if (lboolPrimera == true)
                            {
                                lstrLista += "<li data-target=\"#mycarrucel\" data-slide-to=\"" + lintContador + "\" class=\"active\" style=\" background-color: black;\" ></li>";
                                lstrImagenes += "<div class=\"item active\" style =\"overflow: scroll; max-height: 400px; max-width: 700px; text-align: center;\"> <div class=\"carousel - caption\"><h3>"+ lvardoc.lstrFst135_DocName +"</h3><button class=\"btn btn-primary\">Descargar</button></div> <img data-toggle=\"magnify\" class=\"d-block w-100\"  src =\"data:imagen;base64," + Convert.ToBase64String(lvardoc.lsrFst135_DocByte) + "\"></div>";
                                lintContador++;
                                lboolPrimera = false;
                            }
                            else
                            {
                                lstrLista += "<li data-target=\"#mycarrucel\" data-slide-to=\"" + lintContador + "\" style=\" background-color: black;\"></li>";
                                lstrImagenes += "<div class=\"item\" style =\"overflow: scroll; max-height: 400px; max-width: 700px; text-align: center;\"> <div class=\"carousel - caption\" > <h3>" + lvardoc.lstrFst135_DocName + "</h3><button class=\"btn btn-primary\">Descargar</button></div> <img data-toggle=\"magnify\" class=\"d-block w-100\" src=\"data:imagen;base64," + Convert.ToBase64String(lvardoc.lsrFst135_DocByte) + "\">on\" ></div>";
                                lintContador++;
                            }

                            ldsDoc.Add(obj);
                        }

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.