Загрузите эскиз холста p5.js в формате PDF с помощью jsPDF addImage JPEG
Попытка запустить минимальный скрипт для загрузки элемента холста эскиза p5.js в формате PDF с использованием jsPDF - в частности, метода jsPDF addImage, после преобразования холста в JPEG с использованием метода JS toDataURL.
Я могу заставить p5.js рисовать на холсте и jsPDF для загрузки PDF-файла после запуска страницы, но PDF-файл пустой (черный с JPEG, белый с PNG, предположительно b/c альфа-канал). Я предполагаю, что это из-за того, где у меня в скрипте есть код jsPDF, но в любом другом месте загрузка не работает.
Любой совет?
(Кстати, я попробовал решение этой проблемы: Фон JsPDF addImage jpeg черный, но в итоге я получаю полностью белый PDF-файл, например, когда я использую PNG вместо JPEG)
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Page 0</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity = "sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin = "anonymous"></script>
<script src = "libraries/p5.min.js"></script>
<script src = "libraries/p5.sound.min.js"></script>
</head>
<body>
<script src = "page0.js"></script>
</body>
</html>
function setup() {
let the_canvas = createCanvas(792, 612, P2D);
noLoop();
let doc = new jsPDF("l", "pt", [792, 612]);
let the_img = the_canvas.elt.toDataURL("image/JPEG", 1.0);
doc.addImage(the_img, "JPEG", 0, 0, 792, 612);
doc.save("page0.pdf");
}
function draw() {
background(43);
stroke(200);
fill(200);
textSize(100);
text("Test", 500, 500);
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку сначала запускается setup, а затем draw, вы сохраняете PDF-файл перед записью в него текста.
Попробуйте рисовать и писать, а затем сохраните PDF-файл на последнем этапе:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Page 0</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
<script
src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
integrity = "sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin = "anonymous"
></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
</head>
<body>
<script>
let canvas;
function setup() {
canvas = createCanvas(792, 612, P2D);
noLoop();
}
function draw() {
background(43);
stroke(200);
fill(200);
textSize(100);
text("Test", 500, 500);
const doc = new jsPDF("l", "pt", [792, 612]);
const img = canvas.elt.toDataURL("image/JPEG", 1.0);
doc.addImage(img, "JPEG", 0, 0, 792, 612);
doc.save("page0.pdf");
}
</script>
</body>
</html>
Обратите внимание, что разделение функций setup и draw, как показано выше, не является строго необходимым, поскольку вы выполняете одноразовую операцию. Вы можете поместить весь код в setup или весь код в draw (с помощью noLoop() он запускается только один раз).
Кстати, работал в моей локальной среде, когда я объединил функции setup() и draw().
В этом нет необходимости. Должно быть, какая-то проблема с вашей локальной средой, например, устаревшая версия p5 или что-то в этом роде. Я запускал этот точный код локально в Ubuntu 22.04 и Firefox, и он работал нормально.
Хм, я продолжу расследование. Похоже, у меня тоже версия 1.9.0, но я использую расширение VS Code, специфичное для p5. Мне также пришлось сохранить первую функцию с именем setup(), чтобы она работала, что, вероятно, также не является необходимым.
setup и draw — это специальные функции, которые p5 вызывает при загрузке после заполнения глобальных переменных. Таким образом, вы не можете их переименовывать, но поскольку вы используете noLoop(), не имеет значения, в какой (или обеих) функциях находится код, главное, чтобы порядок отрисовки, а затем PDF-файлов был правильным.
Спасибо! Это работает в веб-редакторе p5.js. Я попробовал это обновление в своей локальной среде с тем же разбивкой файлов, что и в исходном сообщении, но оно все равно не работало. Итак, мне нужно кое-что выяснить с моей средой, но, по крайней мере, теперь у меня есть это решение в качестве модели. Очень признателен.