图像未在打印预览中呈现

Question

我需要打印一个元素，为此，我正在使用 primefaces <p:printer>

在 carDetail panelGrid 中，我有一个可缩放的图像，当我单击打印命令链接时，缩放的图像不会在打印预览中呈现。

缩放 JS：

    function updateBgStyle() {
            if (bgPosX > 0) {
                bgPosX = 0;
            } else if (bgPosX < width - bgWidth) {
                bgPosX = width - bgWidth;
            }

            if (bgPosY > 0) {
                bgPosY = 0;
            } else if (bgPosY < height - bgHeight) {
                bgPosY = height - bgHeight;
            }

            img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
            img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';

            x = document.getElementById('myimage');
            img2 = document.createElement("IMG");

            img2.src = '../../RESOURCES/images/remoteAgent/473_180420160608_HJF4013_2.jpg';


            document.getElementById('myresult').style.backgroundSize = img.style.backgroundSize;
            document.getElementById('myresult').style.backgroundPosition = img.style.backgroundPosition;
            document.getElementById('myresult').style.backgroundImage = "url('" + img2.src + "')";

        }
function onwheel(e) {

            var deltaY = 0;

            e.preventDefault();

            if (e.deltaY) {
                deltaY = e.deltaY;
            } else if (e.wheelDelta) {
                deltaY = -e.wheelDelta;
            }
            var rect = img.getBoundingClientRect();
            var offsetX = e.pageX - rect.left - window.pageXOffset;
            var offsetY = e.pageY - rect.top - window.pageYOffset;

            var bgCursorX = offsetX - bgPosX;
            var bgCursorY = offsetY - bgPosY;

            var bgRatioX = bgCursorX/bgWidth;
            var bgRatioY = bgCursorY/bgHeight;

            if (deltaY < 0) {
                bgWidth += bgWidth*settings.zoom;
                bgHeight += bgHeight*settings.zoom;
            } else {
                bgWidth -= bgWidth*settings.zoom;
                bgHeight -= bgHeight*settings.zoom;
            }

            if (settings.maxZoom) {
                bgWidth = Math.min(width*settings.maxZoom, bgWidth);
                bgHeight = Math.min(height*settings.maxZoom, bgHeight);
            }

            bgPosX = offsetX - (bgWidth * bgRatioX);
            bgPosY = offsetY - (bgHeight * bgRatioY);

            if (bgWidth <= width || bgHeight <= height) {
                reset();
            } else {
                updateBgStyle();
            }
        }

xhtml：

<p:panelGrid id="images" columns="1" style="border: 2px solid white;float: right;
                            border: 2px solid white;">
    <script>                                 
        wheelzoom(document.querySelector('img.zoom'));                      
    </script>
    <img class="zoom" id="myimage" src="../../RESOURCES/images/remoteAgent/473_180420160608_HJF4013_2.jpg"
                                style=" width: 340px; margin-top: 20px;"/>

    <div id="myresult" style="width: 340px;height: 200px; align: center; border: 1px solid black;"></div>   
</p:panelGrid>
<p:commandLink style="margin: 2%; width: 15px; height: 15px;">
    <h:graphicImage url="/RESOURCES/images/remoteAgent/bolaVerde.png" style="margin: 2%; width: 15px; height: 15px;"/>
    <p:printer target=":form:carDetail"/>
</p:commandLink>

zoomed/non-zoomed 图像没有出现在打印预览中，但我更新了结果 img 每次车轮事件发生

测试页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:p="http://primefaces.org/ui"
 xmlns:c="http://java.sun.com/jsp/jstl/core"
 template="/RESOURCES/template/layoutPrincipal.xhtml">
 <ui:define name="head">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
   .parrent_ggn{
     overflow: hidden; 
     width: 200px ;
     height: 200px;
   }
   .parrent_ggn img{
    width: 100%;
   }
   
  </style>
 </ui:define>
 <ui:define name="cont_principal">
  <div class="parrent_ggn" id="parrent_ggn1">
   <div>
    <img src="https://www.w3schools.com/jsref/img_pulpit.jpg"/>
   </div>
  </div>
  <script>
   function ScrollZoom(container,max_scale,factor){
    var target = container.children().first()
    var size = {w:target.width(),h:target.height()}
    var pos = {x:0,y:0}
    var zoom_target = {x:0,y:0}
    var zoom_point = {x:0,y:0}
    var scale = 1
    target.css('transform-origin','0 0')
    target.on("mousewheel DOMMouseScroll",scrolled)

    function scrolled(e){
     var offset = container.offset()
     zoom_point.x = e.pageX - offset.left
     zoom_point.y = e.pageY - offset.top

     e.preventDefault();
     var delta = e.delta || e.originalEvent.wheelDelta;
     if (delta === undefined) {
          //we are on firefox
          delta = e.originalEvent.detail;
        }
        delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency

        // determine the point on where the slide is zoomed in
        zoom_target.x = (zoom_point.x - pos.x)/scale
        zoom_target.y = (zoom_point.y - pos.y)/scale

        // apply zoom
        scale += delta*factor * scale
        scale = Math.max(1,Math.min(max_scale,scale))

        // calculate x and y based on zoom
        pos.x = -zoom_target.x * scale + zoom_point.x
        pos.y = -zoom_target.y * scale + zoom_point.y


        // Make sure the slide stays in its container area when zooming out
        if(pos.x>0)
            pos.x = 0
        if(pos.x+size.w*scale<size.w)
         pos.x = -size.w*(scale-1)
        if(pos.y>0)
            pos.y = 0
         if(pos.y+size.h*scale<size.h)
         pos.y = -size.h*(scale-1)

        update()
    }

    function update(){
     target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')
    }
   }
   var scroll_zoom = new ScrollZoom($('#parrent_ggn1'),4,0.5);
  </script>
 </ui:define>
</ui:composition>

Answer 1

默认情况下，一个 browser will ignore background css rules when printing 页面，您无法使用 css.

克服此问题

用户将需要更改他们的浏览器设置。mor

To keep自己从靠那个，put images 直接在 HTML 中用实际 <img /> tag.

你可以设置parent ‍‌overflow: hidden;并设置图像变换，然后增加比例图像元素 zoomable.this 应该可以打印出来。

function ScrollZoom(container,max_scale,factor){
 var target = container.children().first()
 var size = {w:target.width(),h:target.height()}
 var pos = {x:0,y:0}
 var zoom_target = {x:0,y:0}
 var zoom_point = {x:0,y:0}
 var scale = 1
 target.css('transform-origin','0 0')
 target.on("mousewheel DOMMouseScroll",scrolled)

 function scrolled(e){
  var offset = container.offset()
  zoom_point.x = e.pageX - offset.left
  zoom_point.y = e.pageY - offset.top

  e.preventDefault();
  var delta = e.delta || e.originalEvent.wheelDelta;
  if (delta === undefined) {
       //we are on firefox
       delta = e.originalEvent.detail;
     }
     delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency

     // determine the point on where the slide is zoomed in
     zoom_target.x = (zoom_point.x - pos.x)/scale
     zoom_target.y = (zoom_point.y - pos.y)/scale

     // apply zoom
     scale += delta*factor * scale
     scale = Math.max(1,Math.min(max_scale,scale))

     // calculate x and y based on zoom
     pos.x = -zoom_target.x * scale + zoom_point.x
     pos.y = -zoom_target.y * scale + zoom_point.y


     // Make sure the slide stays in its container area when zooming out
     if(pos.x>0)
         pos.x = 0
     if(pos.x+size.w*scale<size.w)
      pos.x = -size.w*(scale-1)
     if(pos.y>0)
         pos.y = 0
      if(pos.y+size.h*scale<size.h)
      pos.y = -size.h*(scale-1)

     update()
 }

 function update(){
  target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')
 }
}
var scroll_zoom = new ScrollZoom($('#parrent_ggn1'),4,0.5);

.parrent_ggn{
  overflow: hidden; 
  width: 200px ;
  height: 200px;
}
.parrent_ggn img{
 width: 100%;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <div class="parrent_ggn" id="parrent_ggn1">
  <div>
   <img src="https://www.w3schools.com/jsref/img_pulpit.jpg">
  </div>
 </div>

图像未在打印预览中呈现

Image doesn't render in print preview

javascript

printing

primefaces