Как верно провести импорт библиотеки

@Atarion · Регистрация: 01.04.2016

Студворк — интернет-сервис помощи студентам

есть такая библиотека для скриншотов
https://html2canvas.hertzen.com/

я скачал файл и включил в свою html страничку

JavaScript
1
2
3
4
<script type="module" src="html2canvas.js">
 
 
</script>

потом

JavaScript
1
2
3
4
5
6
7
<script>
import html2canvas from 'html2canvas';
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
    
});
</script>

однако же пишет "Uncaught SyntaxError: Cannot use import statement outside a module"
какой в таком случае верный синтаксис? чтобы, собственно, я смог работать с объектом html2canvas?

@Balanaar · 19.12.2022, 16:02

HTML5
1
<script src="html2canvas.js"></script>

HTML5
1
2
3
4
5
<script>
  html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
  });
</script>

@Atarion · 19.12.2022, 16:08 **[ТС]**

да нет, так вообще не работает, конечно. я это сразу попробовал.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<script      src="html2canvas.js">
 
 
</script>
 
<script>
 
 
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
     alert("dssdf");
});
</script>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>
 
</body>
</html>

вот полный код странички, скриншот не создается. в консоли какая то странная ошибка "Uncaught (in promise) Invalid element provided as first argument" alert также не срабатывает

@Balanaar · 19.12.2022, 16:14

Сообщение от Atarion

в консоли какая то странная ошибка "Uncaught (in promise) Invalid element provided as first argument"

Так в ней всё написано. Где у вас на странице элемент с id capture, который вы ищете на 15й строке?

Добавлено через 2 минуты
А. Сорян. Нашёл.
У вас скрипт отрабатывает ДО того, как элемент появляется на странице. Классическая ошибка новичка.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<script      src="html2canvas.js">
 
 
</script>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>
 <script>
 
 
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
     alert("dssdf");
});
</script>
</body>
</html>

@DrType · 19.12.2022, 16:15

Atarion, это значит, что библиотека подключилась.
Но при её использовании возникает ошибка...

@Atarion · 19.12.2022, 16:24 **[ТС]**

я не новичок, сейчас поставлю on document loaded не сообразил просто.

Добавлено через 2 минуты
ешки-матрешки, заработало! Balanaar спасибо!

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	19.12.2022, 16:15
	Atarion, это значит, что библиотека подключилась. Но при её использовании возникает ошибка... 0

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622
	19.12.2022, 16:24 [ТС]
	я не новичок, сейчас поставлю on document loaded не сообразил просто. Добавлено через 2 минуты ешки-матрешки, заработало! Balanaar спасибо! 0

Как верно провести импорт библиотеки

Решение