Css 媒体打印过滤器

Question

如何为发送打印的照片提供滤镜。我尝试添加以下 css.

@media print {
    .photo {
        img {
            filter: brightness(2);
            -webkit-filter: brightness(2);
        }
    }
}

没有任何反应。图片的亮度是一样的。我的应用程序从网络摄像头捕获图片并将 base64 图像发送到服务器。我正在使用 webcam.js 插件来捕获图像。

HTML代码

<a onclick="printpage()" class="btn btn-success" href="#">
<i class="fa fa-print"></i>Print Card
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div id="idCard_print" class="idcard">
<div class="cardinner">
<div class="cardheader">
<div class="image">
<img alt="header logo" width="40px" src="/assets/40xNxcardlogo-7e613bf7d05be0b9d2fe128f14519e11437beaa0d6b40fd2c332b6800059c783.gif.pagespeed.ic.-YOaR880p3.png" data-pagespeed-url-hash="348730017" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="afu-title">
Agriculture and Forestry University
<span>Rampur, Chitwan</span>
</div>
<div class="faculty">
Faculty of Animal Sci., Vet. Sci. &amp; Fisheries
</div>
</div>
<div class="cardtype">
<span>Student ID Card</span>
</div>
<div class="photo">
<div class="student">
<img height="73px" src="data:image/jpeg;base64,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" data-pagespeed-url-hash="3345598353" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="sign">
<img src="data:image/png;base64,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" alt="Sardha" data-pagespeed-url-hash="2948073300" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
</div>
<div class="clearfix"></div>
<div class="details">
<ul>
<li><span>Name:</span> Roshan Gyawali</li>
<li><span>Address:</span> Rupandehi, Siyari - 7</li>

<li><span>Date of Birth:</span> 2017-11-07</li>
<li><span>Level:</span> B. V. Sc. &amp; A.H.</li>
<li><span>Year:</span> 2013-2019</li>
</ul>
</div>
<div class="barcode">
<p>90432635</p>
<img class="img-responsive" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAABIAQAAAADzYAXTAAAABGdBTUEAALGP
C/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUw
AADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAAHdihOkAAAACXBIWXMAAABIAAAA
SABGyWs+AAAAQklEQVRIx2P4jx8wtFX+Y59R+SDx4fPG9hlycuwzKiQfPmNv
Y5+XkCBRx5Y4Kj8qPyo/Kj8qPyo/Kj8qP+jkCbRvABzvCT9bo5chAAAAAElF
TkSuQmCC
" data-pagespeed-url-hash="3905847029" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="expiry">Expiry: Jan 01, 2019</div>
<div class="url">www.afu.edu.np</div>
</div>
</div>
<style>@media print{aside#sidebar,header[role="banner"],footer,#comments,#respond,header{display:none}#sidebar-wrapper,.header,table,.head,.container-fluid,#topNav,#idCard,.widget,.content-wrapper{display:none}.btn{display:none}.margin-top,.panel{display:none}body{content:asset-url("card-backgroundafu.png")}*{color:#000;// @include box-shadow(none);// @include text-shadow(none);-webkit-print-color-adjust:exact!important;color-adjust:exact!important}#page-wrapper.open{padding:0;height:0;margin:0}#page-wrapper .sidebar-footer{display:none}#page-wrapper ul.sidebar{display:none}#page-wrapper #sidebar-wrapper{display:none}#idCard_print{display:block;position:relative;background-color:#fff!important;margin:0;padding:0}#idCard_print .cardinner{padding:0}#idCard_print .cardinner .cardheader{font-size:11px;text-align:center;height:84px;line-height:11px;background-color:#deefe3!important;font-family:"Helvetica",sans-serif}#idCard_print .cardinner .cardheader .afu-title span{font-size:9px;line-height:9px;display:block}#idCard_print .cardinner .cardheader .faculty{font-size:10px;text-transform:uppercase;font-family:'',sans-serif;font-weight:700;line-height:11px;margin-top:2px}#idCard_print .cardinner .cardtype{font-family:'Helvetica',sans-serif;text-align:center;color:#fff!important;background:#8dc349!important;width:100%;margin:0 auto;font-size:11px}#idCard_print .cardinner .cardtype span{border-left:2px solid #fff!important;border-right:2px solid #fff!important;border-radius:10px;padding:2px 20px;color:#000!important}#idCard_print .cardinner .photo{height:77px;position:relative;margin-top:3px}#idCard_print .cardinner .photo .student{text-align:center}#icCard_print .cardinner .photo .student img{border:2px solid #ccc;border-radius:10px;filter:brightness(2);-webkit-filter:brightness(2)}#idCard_print .cardinner .photo .sign{margin:0 auto;top:50px;position:absolute;left:61px}#idCard_print .cardinner .photo .sign img{width:50px}#idCard_print .cardinner .photo .dean{text-align:center;font-size:10px;font-family:'Ubuntu',sans-serif;margin-top:5px;font-weight:800}#idCard_print .cardinner .details ul{list-style:none;text-align:center;margin:0;padding:0;font-size:10px;font-family:'Ubuntu',sans-serif;line-height:13px}#idCard_print .cardinner .details ul li span{font-weight:800}#idCard_print .cardinner .barcode img{width:50%;margin:0 auto}#idCard_print .cardinner .barcode p{font-family:'Ubuntu',sans-serif;font-size:9px;letter-spacing:3px;text-align:center;margin:10px 0 0 0}#idCard_print .cardinner .url{font-size:11px;text-align:center;font-family:'Ubuntu',sans-serif;background:#8dc540!important;color:#000!important}#idCard_print .cardinner .expiry{font-size:9px;font-weight:600;text-align:center;font-family:'Ubuntu',sans-serif;color:red!important}#idCard_print:before{content:"";background-image:asset-url("card-backgroundafu.png")!important;background-repeat:no-repeat;background-position:center center;content:' ';display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;opacity:.1}@page { size: 53.98mm 85.60mm;  margin: 0mm; }}</style>
</div>

Answer 1

据我所知，唯一的问题是您的 CSS.

似乎使用了类似 SASS 的语法

@media print {
  .photo {
    img {
      filter: brightness(2);
      -webkit-filter: brightness(2);
    }
  }
}

如果这是原始的 CSS 那么您需要清理语法以匹配它：

@media print {
  .photo img {
    -webkit-filter: brightness(2);
    filter: brightness(2);
  }
}

请记住始终将供应商特定样式放在通用样式之前。所以我把 -webkit-filter 移到了 filter

之前

我在我的机器上创建了一个本地页面并模拟了打印，CSS 确实适用于上述更改。

同时考虑为每张图片添加特定的 class 以帮助改进您的 CSS 规则。

而不是这个：

#icCard_print .cardinner .photo .student img{
  border:2px solid #ccc;
  border-radius:10px;
  filter:brightness(2);
  -webkit-filter:brightness(2)
}

您可以将其简化为：

.student-img{
  border:2px solid #ccc;
  border-radius:10px;
  filter:brightness(2);
  -webkit-filter:brightness(2)
}

该图片标签的 html 是这样的：

<img class="student-img>

然后将 height:73px 移动到 CSS 而不是 style 属性中。

考虑使用 BEM styled css，您可以在所有 CSS 规则中看到一个好的 simplification/reduction。

此外，我总是对 @media print 块中的所有内容使用 !important。这是我唯一允许自己使用 !important 的地方，但我在所有地方都使用它只是为了确保我对 CSS.

有适当的特异性

Look here for how to emulate print mode in Chrome

Css 媒体打印过滤器

Css filter for media print

html

css

media-queries

webcam.js