Question

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

In html5 you can use the download attribute in the anchor tag, just like this:

<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>

Answer 2

点击图片以href到锚点
点击锚点下载图片

<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>

Save image using image id as png, jpg and pdf

2 个答案: