我正在使用HTML5 Canvas进行一些工作。目前一切都很顺利,除了现在我只能使用Canvas2image将画布内容导出为PNG格式。但是我想将其导出为PDF格式。我做了一些研究,我相信这是可能的......但我似乎无法理解我需要在代码中做出哪些改变才能使它起作用。我已经了解了一个名为pdf.js的插件......但我不能弄清楚如何将其实现在我的代码中。
function showDownloadText() {
document.getElementById("buttoncontainer").style.display = "none";
document.getElementById("textdownload").style.display = "block";
}
function hideDownloadText() {
document.getElementById("buttoncontainer").style.display = "block";
document.getElementById("textdownload").style.display = "none";
}
function convertCanvas(strType) {
if (strType == "PNG")
var oImg = Canvas2Image.saveAsPNG(oCanvas, true);
if (strType == "BMP")
var oImg = Canvas2Image.saveAsBMP(oCanvas, true);
if (strType == "JPEG")
var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);
if (!oImg) {
alert("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
oImg.id = "canvasimage";
oImg.style.border = oCanvas.style.border;
oCanvas.parentNode.replaceChild(oImg, oCanvas);
showDownloadText();
}
保存图片的JS代码如下:
document.getElementById("convertpngbtn").onclick = function() {
convertCanvas("PNG");
}
document.getElementById("resetbtn").onclick = function() {
var oImg = document.getElementById("canvasimage");
oImg.parentNode.replaceChild(oCanvas, oImg);
hideDownloadText();
}
}
jspdf.min.js
,则可以将canvas.toDataURL()
发送到pdf.addImage
中,因此您不需要直接使用canvas-toBlob.js
。 - markE