sample: jsPDFを使って画像を含むPDFをダウンロード
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<p>Firefox, Chromeなど最新のブラウザで試してください。</p>
JavaScript
(_ => {
return new Promise((resolve, reject) => {
const image = new Image();
//今回はCDNの画像を借りてくるので、CORS対応必須
image.crossOrigin = "Anonymous";
//画像の読み込み完了まで待つ
image.addEventListener("load", e => {
//canvasを生成し、幅と高さを画像に合わせる
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
//canvasに画像を読み込む
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
//toDataURLでData URIに変換し、後続の処理へ渡す
resolve(canvas.toDataURL("image/jpeg"));
}, false);
image.src = "https://placehold.it/350x150";
});
})().then(imgData => { //imgData: 画像をData URIに変換したもの
//公式のサンプルまるパクり
const doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, 'Paranyan loves jsPDF');
//受け取ったData URIをaddImageに渡す
doc.addImage(imgData, 'JPEG' ,15, 40, 180, 160);
doc.save('Test.pdf');
});