Abhijit Dutta Abhijit Dutta - 1 month ago 22
jQuery Question

Save image using image id as png, jpg and pdf

Here is the link - http://demo.crazewebconsultants.net/bag/customization.php

<div class="customizationbag">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
<div class="thumbimg">
<ul class="list-unstyled">
<li class="timgare"><img src="images/F.jpg" class="dummy_data"></li>
<li class="timgare"><img src="images/L.jpg" class="dummy_data"></li>
<li class="timgare"><img src="images/R.jpg" class="dummy_data"></li>
<li class="timgare"><img src="images/B.jpg" class="dummy_data"></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="custbigimg">
<img src="images/F.jpg" class="img-responsive">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="custbtnare">
<ul class="list-unstyled">
<li><button type="button" class="btn btn-primary"><i class="fa fa-upload" aria-hidden="true"></i> <p>Upload</p></button></li>
<li class="dropsave"><button type="button" class="btn btn-primary svoption"><i class="fa fa-floppy-o" aria-hidden="true"></i><p>Save</p></button>
<ul class="svop list-unstyled">
<li><a href="#">Save as PNG</a></li>
<li><a href="#">Save as JPG</a></li>
<li><a href="#">Save as PDF</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" id="print_button2" class="btn btn-primary"><i class="fa fa-print" aria-hidden="true"></i><p>Print</p></a></li>
<li><button type="button" class="btn btn-primary"><i class="fa fa-cart-plus" aria-hidden="true"></i><p>Add to Cart</p></button></li>
</ul>
</div>
<div class="qntare">
<form class="form-inline">
<div class="form-group">
<label>Quantity :</label>
<input type="text" class="form-control" value="1">
</div>
<div class="form-group">
<label>Price :</label>
<p>$200</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.thumbimg .dummy_data').click(function(){
$(".custbigimg img").attr("src",$(this).attr("src"));
});
});
</script>
<script>
$(document).ready(function(){
$("#print_button2").click(function(){
var mode = 'iframe'; // popup
var close = mode == "popup";
var options = { mode : mode, popClose : close};
$("div.custbigimg").printArea( options );
});
});

</script>


I just want to save image by using onclick as png, jpg and pdf. Can anybody help me? Using image id I want to save that particular image using onclick. If anybody show me the only one save system like save as png that was ok for me.

Answer
  1. click on an image to asing href to the anchor
  2. click in the anchor to download image

<a href="http://vignette3.wikia.nocookie.net/disney/images/d/df/Darth_Vader_Render.png/revision/latest?cb=20151222170300" download><img src="http://vignette3.wikia.nocookie.net/disney/images/d/df/Darth_Vader_Render.png/revision/latest?cb=20151222170300" ></a>

var currentImage = "";

$('img').click(function() {
  var currentImage = $(this).attr('src');
  console.log(currentImage);
  
  $("#anchor").attr('href', currentImage).attr('download', currentImage);
});
img {
  max-width:50px;
}

.hidden {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img src="http://vignette3.wikia.nocookie.net/disney/images/d/df/Darth_Vader_Render.png" id="vader">

<img src="http://news.toyark.com/wp-content/uploads/sites/4/2015/08/Mafex-C-3PO-and-R2-D2-002.jpg" id="c3po">

<img src="http://vignette4.wikia.nocookie.net/es.starwars/images/6/6f/Anakin_Skywalker_RotS.png" id="annakin">


<a href="" download id="anchor">download image</a>

Comments