php - 多图像选择并使用 jquery 打印选定的图像

Question

我有像下面这样的图像集 div 标签:

function printImg() {
  pwin = window.open(document.getElementById("mainImg").src,"_blank");
  window.print();
}
$(function () {
    $("#gallery > img").click(function () {
        if ($(this).data('selected')) {
        $(this).removeClass('selected');
        $(this).data('selected', false);
    } else {
        $(this).addClass('selected');
        $(this).data('selected', true);
    }
    });
    var selectedImageArray = [];
$('#gallery > img').each(function () {
    if ($(this).data('selected')) {
        selectedImageArray.print(this);
    }
});
 window.onafterprint = function(){
      window.location.reload(true);
 }

});

img.selected {
    border: 3px solid green;
}
img:hover {
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img name=imgqr[] id="mainImg" src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(180)->generate($user->emp_code[$i])) !!} " width="100"; height="80"; >{{$user->emp_first_name}}&nbsp;{{$user->emp_last_name}}&nbsp;{{!!($user->dpt_name)!!}}</td></tr>                             
 </div>
<input  class="printMe" type="button" onclick="printImg()" value="printMe" />

我需要在用户点击它时选择图像，我为此添加了脚本并且它工作，但是我点击打印按钮它不打印二维码图像，同时打印整个页面。

我还需要检查是否选择了图像并通过数组值来打印选择的图像+数据名称。

Answer 1

Window.print() 将始终打印整个当前窗口。您可以通过将所选图像添加到弹出窗口然后打印该弹出窗口来绕过它。

popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();

您可以为一张照片在一个窗口中执行此操作，但当然您也可以将多张照片添加到一个屏幕上，然后进行打印。

您的第二个问题要求提供包含所选图像的数组。因为您使用 jQuery，所以您可以通过以下方式获取它们

allSelectedImages = $('.selected');

您可以循环该数组并在其上调用函数 .data() 以获取所有数据属性!

希望这对您有所帮助!