Как реализовать функцию скриншота в один клик во внешнем интерфейсе?

JavaScript Canvas

предисловие

Функция скриншотов веб-страниц также является очень распространенным требованием, особенно в области онлайн-образования.Плакаты Wechat, плакаты событий и т. Д. В нашем кругу друзей обычно разрабатываются операторами / маркетологами с помощью инструментов дизайна, но как лучше сопоставить их к себе В сервисной системе, такой как страницы H5, имплантированы дополнительные возможности сбора информации и взаимодействия.Для исследования приложений в этой области очень хорошим решением являются скриншоты страниц.

Далее я рассмотрю, как создавать плакаты для страниц одним щелчком мыши на основе веб-страниц и интегрировать эту возможность в мой проект с открытым исходным кодом.H5-DooringВключает редактор в .

текст

Перед реализацией конкретных функций давайте взглянем на конкретные эффекты реализации:Из демонстрации видно, что нашей конечной целью является создание скриншотов страниц H5 на стороне ПК, поэтому могут возникнуть следующие проблемы:

  • Как превратить страницы в картинки
  • Как реализовать симуляцию эффекта H5 и перехватить реальную страницу H5

Мы можем сначала подумать об идеях реализации, как мы можем преобразовать их в изображения на основе dom?Эта технология также является общей темой, мы все знаем, что мы можем использовать холст для достижения, общий процесс выглядит следующим образом:Если мы используем нативную схему реализации, мы должны пройти описанные выше шаги.Второй шаг является ключевым звеном и самым сложным шагом.Нам нужно вручную внедрить dom дляcanvasОтображение и, наконец, преобразование в стандартный объект рисования холста.Конечно, есть много готовых библиотек, которые могут напрямую помочь нам упростить этот шаг, напримерhtml2canvas, dom-to-imageДалее мы решим первую задачу.

Как превратить страницы в картинки

В процессе личного исследования и использования библиотеки html2canvas автор обнаружил массу проблем, например, если в стиле появляется единица %, или есть какие-то проблемы с фоном картинки, плохо работает html2canvas, а с восстановлением и четкостью рендеринга есть проблемы, поэтому автор пока глубоко не изучал (но эти проблемы можно решить модификацией самой библиотеки), а непосредственно ей автор воспользуется позжеdom-to-image, я обнаружил, что он очень прост в использовании и почти не вызывает проблем, упомянутых выше, поэтому автор решительно принялdom-to-image, После прочтения исходного кода библиотеки я чувствую, что он также очень элегантен и прост для понимания. Это не должно быть большой проблемой для последующей разработки позже. Мы можем посмотреть на основное использование его официального сайта:

// 引入
import domtoimage from 'dom-to-image';

// 生成图片
domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Использование также очень простое, и оно предоставляет достаточно элементов конфигурации, которые мы можем гибко настраивать.

Первая проблема решается таким образом, но я обнаружил проблему смазанных картинок во время использования.В интернете тоже много решений.Например сначала увеличить на дом, а потом уменьшить при обработке холста и наконец генерировать картинка Не по одному примеру.

Как реализовать симуляцию эффекта H5 и перехватить реальную страницу H5

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

  • Используйте iframe в качестве контейнера страницы H5 для создания скриншотов
  • Напрямую ограничить ширину для создания скриншотов на текущей странице
  • Используйте поисковый робот на стороне сервера для имитации доступа к мобильному телефону с помощью одного ключа для создания снимков экрана.

Вышеуказанные решения можно попробовать.Для третьего решения у автора также есть приложения-краулер с открытым исходным кодом для решения этой проблемы.Кто заинтересован, может изучить следующее.Очевидно, что мы выберем первое решение для его реализации, как показано на H5 во всплывающем окне, которое мы видим, на самом деле отображается в iframe:С идеей реализации проблема легко решается.Нам нужно только реализовать обмен сообщениями между родительской страницей и iframe, например, после загрузки iframe вручную уведомить iframe о перехвате самого себя.Базовый код реализации выглядит как следует:

// 编辑器页面, 也就是父页面
// 定义截图子页面句柄函数
window.getFaceUrl = (url) => {
  setFaceUrl(url)
  setShowModalIframe(false)
}

// iframe页面, 也就是预览页面
const generateImg = (cb:any) => {
    domtoimage.toBlob(refImgDom.current, 
      {
        width,
        height,
      }
    )
    .then(function (blob:Blob) {
        const formData = new FormData();
        formData.append('file', blob, 'tpl.jpg');
        req.post('/files/upload/free', formData).then((res:any) => {
          cb && cb(res.url)
        })
    })
    .catch(function (error:any) {
        console.error('oops, something went wrong!', error);
    });
}

// 触发父页面的方法,将图片传给父页面
generateImg((url:string) => {
  parent.window.getFaceUrl(url);
})

Наконец

Автор вышеуказанного туториала был интегрирован вH5-DooringДля некоторых более сложных интерактивных функций это также может быть реализовано с помощью разумного дизайна, и вы можете исследовать и исследовать самостоятельно.

адрес гитхаба:Редактор H5H5-Dooring

Если вы хотите узнать больше об играх H5,webpack,node,gulp,css3,javascript,nodeJS,canvasПередовые знания и реальные сражения, такие как визуализация данных, приглашаем учиться и обсуждать вместе в разделе «Интересный интерфейс», чтобы вместе исследовать границы интерфейса.

больше рекомендаций

Категории