Использование html2canvas для создания снимков экрана браузера должно быть реализовано в серверной среде.
эффектhtml2canvas может делать снимки экрана на стороне браузера с помощью чистого JS, но необходимо повысить точность снимков экрана, а некоторые CSS не могут быть распознаны, поэтому исходный стиль экрана не может быть идеально представлен на холсте.
/*Невозможно пропустить многострочное переполнение, его можно только скрыть*/ .book_inf{ позиция: относительная; переполнение: скрыто; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp; : 2 - ориентация веб-кита: вертикальная } Поддерживаемые браузеры /*Параметры: * #screenshots Требуемый идентификатор элемента снимка экрана, функция, которая будет выполнена после создания снимка экрана, * цвет фона элемента конфигурации backgroundColor * Canvas — последний холст, возвращаемый после создания снимка экрана */function screensImg(){ html2canvas (document.querySelector( #screenshots),{backgroundColor: 'transparent',//Установить прозрачный фон}).then(canvas => {canvasTurnImg(canvas) //Метод преобразования формата сохраненного изображения}); } Доступные элементы конфигурации| Имя параметра | тип | значение по умолчанию | описывать |
|---|---|---|---|
| РазрешитьТаинт | логическое значение | ЛОЖЬ | Разрешить ли изображениям с перекрестным происхождением портить холст --- разрешить перекрестное происхождение |
| фон | нить | #ффф | Цвет фона холста, если в DOM не указан. Установите неопределенный для прозрачного цвета фона холста, если белый цвет по умолчанию не установлен, это ловушка, я изменил его на фоновый цвет. |
| высота | число | нулевой | Определите высоту холста в пикселях. Если значение равно нулю, выполняется рендеринг с полной высотой окна. --- Настройка высоты холста. |
| письмоРендеринг | логическое значение | ЛОЖЬ | Необходимо ли отображать каждую букву отдельно. Необходимо, если используется межбуквенный интервал. ---Полезно, когда задан интервал между буквами. |
| регистрация | логическое значение | ЛОЖЬ | Записывать ли события в консоль. --- Выводить информацию в console.log(). |
| прокси | нить | неопределенный | URL-адрес прокси-сервера, который будет использоваться для загрузки изображений из разных источников. Если оставить пустым, изображения из разных источников не будут загружаться. --- Адрес прокси. |
| tainTest | логическое значение | истинный | Следует ли проверять каждое изображение, если оно портит холст, перед его рисованием — проверять ли изображение перед рендерингом |
| тайм-аут | число | 0 | Тайм-аут загрузки изображений в миллисекундах. Установка значения 0 приведет к отсутствию тайм-аута. --- Задержка загрузки изображения, задержка по умолчанию равна 0, в миллисекундах. |
| ширина | число | нулевой | Определите ширину холста в пикселях. Если значение равно нулю, выполняется рендеринг с полной шириной окна. --- Ширина холста. |
| использовать CORS | логическое значение | ЛОЖЬ | Следует ли пытаться загружать изображения из разных источников в качестве CORS, прежде чем вернуться обратно к прокси-прокси с несколькими источниками. |
1. Извлеките метаданные изображения прямо с холста.
// Экспортируем изображение в формат png var type = 'png'; var imgData = Canvas.toDataURL(type);
2. Измените тип mime на image/octet-stream, чтобы заставить браузер загружать напрямую.
/** * Получить mimeType * @param {String} введите старый тип mime * @return новый тип mime */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; данные, замените тип mimeimgData = imgData.replace(_fixType(type),'image/octet-stream');3. Загрузите образ на локальный
/** * Сохранение файлов локально * @param {String} data Данные изображения, которые необходимо сохранить локально * @param {String} имя файла имя файла */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = данные; save_link.download = имя файла; событие = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); event);}; // Имя загруженного файла var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;// downloadsaveFile (imgData, имя файла);Случай
Случай
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.