Question

这只是一个简单的HTML页面，我正在尝试生成PDF，一切正常但生成的PDF没有我在浏览器中可以看到的过滤效果。我正在使用wkhtmtopdf生成PDF。

我也试过@media打印，但也没用，或者我不知道如何使用它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <link rel="Stylesheet" type="text/css" href="croppie.css" />
    <style type="text/css">
        /*.ig-1977 
        {
            filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);
        }
        .ig-brannan 
        {
            filter: sepia(0.5) contrast(1.4);
        }
        .ig-kelvin 
        {
            filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1);
        }
        .ig-nashville 
        {
            filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
        }
        .ig-xpro2 
        {
            filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
        }
        .ig-greyscale
        {
            filter: grayscale(1);
        }
        .ig-vintage
        {
            filter: grayscale(0.1) saturate(1) sepia(0.6);
        }*/

        @media print
        {
            .ig-greyscale
            {
                -webkit-filter: grayscale(1) !important;
                -webkit-print-color-adjust: exact; 
            }
        }
    </style>
</head>
<body>
    <div class="croppie-container">
        <div class="cr-boundary" style="width: 281px; height: 368px;">
            <img class="cr-image ig-greyscale" crossorigin="anonymous" src="http://localhost/codeIgniter/assets/images/default/original/eb29bde778567e70d9ce048b70e7ba30.jpg" style="opacity: 1; -webkit-transform: translate3d(-158.052px, 13.0947px, 0px) scale(1.5) rotate(270deg); -webkit-transform-origin: 298.552px 170.905px 0px;" data-angle="270">
        </div>
    </div>
</body>
</html>

如何在wkhtltopdf中使用webkit-filter

0 个答案: