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

@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 спасибо!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@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

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

Решение