在使用 JS toDataURL 方法将画布转换为 JPEG 后，尝试运行一个最小脚本，以使用 jsPDF（特别是 jsPDF addImage 方法）将 p5.js 草图画布元素下载为 PDF。
启动页面后，我可以让 p5.js 在画布上绘图，让 jsPDF 下载 PDF，但 PDF 是空白的（黑色带有 JPEG，白色带有 PNG，大概是 b/c alpha 通道）。我猜这是因为我在脚本中包含了 jsPDF 代码，但是我将其放在其他任何地方，下载都不起作用。
有什么建议吗？
（FWIW，我尝试了解决方案：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;
}
由于
setupdraw尝试写入，然后保存：
<!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>