HTML на основе скриншота реализации Canvas

Я помню, как обменивался всеми, объясняя скриншот на базе JS. Так что на этот раз я планирую написать идею поделиться со всеми. Это просто очень простая маленькая демонстрация. В соответствии с обычным адресом PO -кода.

Визуализации

Общее мышление

• Установите клавишу ярлыка запуска/конечного
• После начала DOM перенесен на холст, чтобы покрыть исходный интерфейс DOM
• Добавить область экрана мыши моделирования холста
• Добавьте холст, чтобы нарисовать интерфейс браузера, соответствующий области скриншота мыши (перехватывается с первого холста)
• Сохранить перехваченное изображение

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

 Функциональный скриншот (QuickStartKey, EndKey) {// Совместимость не использовать ... расширенная строка var keylength = QuickStartKey.length var askeytrigger = {} var cantshot = false ... q uickstartkey. Траверные параметры массивы iskeytrigger [item] = false // Все клавиши в массиве по умолчанию не запускаются}) $ ('html'). = = EndKey) {...} else if (! CantStartShot) {iskeyTrigger [KeyCode] = true var nottrigger = object.keys (iskeytrigger). быть запускаемым}) if (nottrigger.length === 0) {// Не существует ярлыка, который необходимо запустить.

Если вы принимаете нативный метод, вы можете обратиться к введению DOM в соответствии с MDN. Самое сложное в том, что вам нужно создать элемент, участвующий в изображении SVG, содержащем XML. Как вычислить DOM, отображаемый в текущем браузере и извлечь его на самом деле самый утомительный. На самом деле, у автора нет хорошей идеи, чтобы вручную реализовать один =. =, Поэтому я выбрал эту библиотеку HTML2Canvas, чтобы завершить это. Общий метод вызова выглядит следующим образом:

 Функция beginshot (cantStartShot) {if (antStartShot) {html2canvas (document.body, {onrendered: function (canvas) {// Получить изображение Canvas с тем же интерфейсом})}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

Особое понимание этого места было предназначено для использования нативного Canvasapi, но в нем участвовала проблема. удаляется, когда это вызвано MouseMove. Для имитации реального процесса рисования. Беспомощный автор не нашел метод использования Canvas Native API. Здесь автор использует библиотеку Canvas на основе JQ под названием JCanvas. Это отвечает потребностям автора, и реализация заключается в следующем:

 $ ('#' +canvasid) .mouseDown (function (e) {$ (# +canvasid) .Removelayer (layermame) // Удалить предыдущий слой LayermaMe += 1 startX = that._calculationxy (e) .x // Рассчитайте Положение мыши starty = that._calculationxy (e) .y isshot = true $ (#+canvasid) .addlayer ({type: 'rectangle', // rectangular ... name: layName, имя слоя x: startx, y : Starty, width: 1, высота: 1})}). = that._calculationxy (e) .y var width = movex -startx var height = goty -starty $ (#+canvasid) .addlayer ({type: 'rectangle', ... имя: lay: lay ername, fromcenter: false , X: startx, y: starty, width: width, высота: высота}) $ (#+canvasid) .drayers ();

 var canvasresult = document.getElementbyId ('canvasresult') var ctx = canvasresult.getContext (2d); , 0, 0, ширина, высота) var datairl = canvasresult.todataurl (image/png);

Среди них изображение было перехвачено с помощью DrawMage, а затем изображение было преобразовано в кодирование BASE64 с использованием метода Todataurl

 Функция скачать (el, filename, href) {el.attr ({'загрузка': filename, 'href': href})} ... downloadfile ($ ('. Ok'), 'Screenshot' + Math .random ( .random () .tring ().

Среди них атрибут загрузки тега может быть загружен непосредственно, когда пользователь нажимает.

 <script src = https: //cdn.bootcss.com/jquery/3.2.1/jqury.min.js> </script> <script src = https: //cdn.bootcss.com/jcanvas/16.3/ jcanvas.min.js> </script> <script src = https: //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </script>

 Скриншот ([16, 65], 27) // Запуск клавиши ярлыка, установленную для сдвига+a;

Наиболее отвратительное место в статье (DOM пишет с помощью слоев Canvas и Canvas) использует две библиотеки для реализации, соответственно. что это все еще немного. Сущность

Выше всего содержимое этой статьи.