Chrome CSS 필터 그레이 스케일 이미지/텍스트 왜곡

페이지에 내용이 있고 인쇄 할 때 회색 음영으로 표시하고 싶습니다. 내가 이것을 찾은 방법은 CSS 필터를 사용하는 것입니다.

.body { 
    filter: Gray(); 
    filter: url('#grayscale'); 
    -webkit-filter: grayscale(1); 
    filter: grayscale(100%); 
}

인쇄 할 때 모든 것이 잘 보이지만 왜곡됩니다.

는합니다 (Ctrl-P를 쳤고, 예를 들어 2 페이지를 봐주세요.)

사람은 전에 본 적이 있습니까? Google 크롬을 사용하고 있습니다 v60.0.3112.113

2017-09-27 Hank

인쇄를 시도 했습니까? 흐릿 해 보이는가? –

@JaneDoe Printing은 미리보기와 똑같이 나타납니다. 그리고 그것은 흐려지지 않습니다. 대신 pixelation과 같은 왜곡처럼 보입니다. – Hank

문제를 해결하기 위해 노력했지만 텍스트에 대한 작은 해결책을 생각해 냈지만 이미지를 수정할 수는 없었습니다.

나는이 텍스트 잘 작동하는지 발견

body { 
    color: red; 
} 
@media print { 
body { 
    color: #000 !important; 
    } 
}

을 나는 어쨌든 조금 도움이되기를 바랍니다 ... 난 그냥 인쇄 모드에서 색상을 변경을 증명하는 텍스트가 빨간색했다. 텍스트가 선명하게 보이지만 이미지는 여전히 문제입니다. 죄송합니다.

2017-09-27 22:54:46

불행히도, 저는 주로 그레이 스케일 된 이미지가 필요합니다. 인쇄시 텍스트 색상을 변경할 수 있다는 것을 알고 있습니다. 주로 텍스트 부분을 추가하여 필터가 이미지뿐만 아니라 모든 요소를 왜곡한다는 것을 보여줍니다. – Hank

@Hank 자바 스크립트를 사용할 수 있는지 잘 모르겠지만 이미지를 회색 음영으로 변환하는 솔루션을 발견하고 인쇄에 적합합니다. https://codepen.io/duketeam/pen/ALEByA –

답변