使用图像ID将图像保存为png，jpg和pdf

Question

这是链接-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>

我只想通过使用onclick将图像保存为png，jpg和pdf。 有谁能够帮助我？ 使用图像ID我想使用onclick保存该特定图像。 如果有人向我展示唯一适合我的保存系统，例如另存为png。

Answer 1

在html5中，您可以在anchor标签中使用download属性，如下所示：

 <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

1. 单击图像将href锚定为锚点
2. 单击锚点下载图像

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