javascript - Bootstrap Lightbox Carousel 中的按钮下载轮播中的活动图像

Question

我使用包含行和列的 css 创建了一个网格。在图像网格中单击图像时，单击图像的大版本会出现在模式中。在模态正文中，我插入了一个轮播标题，它是一个用于下载当前活动图像的按钮。我的图像网格中的每个图像都有一个唯一的 ID。id="portrait1"、id="portrait2" 等。当我按下下载按钮时，我希望它下载附加到唯一 div id 的完整图像文件。

在这种情况下，捕获画布将不起作用，因为它不允许人们下载和接收我提供的完整高质量图像。

我是一名摄影师，并希望允许我拍摄照片的人在按下下载按钮时下载全尺寸的高质量图像。

我是 jquery 和 javascript 的新手，所以我无法定位特定的 div id 来下载图像。

弹性图像网格

<div id="content"></div>

   <div class="row_container">
     <div class="row">

       <div class="col" id="portrait0">
           <img class="portrait" 
             href="#lightbox" data-toggle="modal" 
             src="/portraits/port_1.jpg" style="width: 100%">
       </div>

       <div class="col" id="portrait1">
           <img class="portrait" 
             href="#lightbox" data-toggle="modal" 
             src="/portraits/port_2.jpg" style="width: 100%">
       </div>

       <div class="col" id="portrait2">
           <img class="portrait" 
             href="#lightbox" data-toggle="modal" 
             src="/portraits/port_3.jpg" style="width: 100%">
       </div>

      </div>
    </div>

  </div>

Bootstrap Lightbox 代码，模态正文中带有按钮：

  <div class="modal fade and carousel slide" id="lightbox">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">

           <div class="item active">
             <div class="carousel-caption">
               <a href="https://www.google.co.uk/" target="_blank"> 
                  <button type="button" class="btn btn-default">Read 
                   More</button>
               </a>
             </div>
           </div>

           <div class="carousel-inner"></div>

           <a class="left carousel-control" href="#lightbox" 
             role="button" data-slide="prev">
               <i class="fa fa-chevron-left fa-2x"></i>
           </a>
           <a class="right carousel-control" href="#lightbox" 
             role="button" data-slide="next">
               <i class="fa fa-chevron-right fa-2x"></i>
           </a>

        </div><!-- /.modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

现在按钮设置为导航到谷歌，但是当我点击按钮时，我希望它下载当时可见的图像。

标签： javascriptjqueryhtmlcsstwitter-bootstrap-3