Как "сгладить" изображения при печати из браузера?

Question

У нас есть веб-страницы, которые мы хотим разрешить пользователю печатать. Страница может содержать изображения, которые мы хотим "защитить". Мы используем несколько методов, чтобы не дать наивному пользователю "копировать" изображения с веб-страницы.

Когда пользователь печатает, браузер предлагает одну из опций "печать в PDF". У нас нет способа предотвратить это. Проблема в том, что PDF состоит из отдельных изображений, поэтому любой пользователь может индивидуально выбирать и копировать изображения из PDF.

Мы надеялись, что использование html2canvas решит проблему, но хотя он и создал хороший объект canvas, печать холста не "сглаживает" составляющие изображения. (они все еще могут быть выбраны и скопированы)

Как другие люди защищали изображения на своих веб-страницах, в то же время позволяя пользователю распечатывать их?

Answer 1

Вы можете создать отдельную таблицу стилей (что-то вроде print.css), которая будет отображать другой макет / стили для принтеров. Вы можете использовать дисплей: нет; для ваших сдержанных изображений.

Эта статья должна дать хорошее объяснение того, как это настроить. https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

Answer 2

html2canvas сделал именно то, что мы хотели... после того, как мы исправили наши ошибки в том, как мы это использовали.

Мы создаем dom обычным способом, затем вызываем html2canvas, чтобы "сделать снимок" той части экрана, которую мы хотим, чтобы пользователь печатал. Если все сделано правильно, все наши изображения свернуты в одно изображение, и если пользователь печатает в PDF, он не может их разорвать.

Наша ошибка заключалась в неправильном удалении всех изображений из домена ПОСЛЕ преобразования. Таким образом, они постепенно передавались в PDF.