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>