joshua-gould / canvas2pdf Goto Github PK
View Code? Open in Web Editor NEWExport your HTML canvas to PDF
License: MIT License
Export your HTML canvas to PDF
License: MIT License
I've got a existiong normal Canvas object, can I turn it to text PDF?
Or I must use the ordes to draw a new PDFcanvas?
Is there any method to create a new page inside PDF ?
How to configure page size?
Hi developer,
I want to bind the tag like,, to draw the vector plot using canvas2pdf API
but it seem can not been work like i said before.
The canvas2pdf only create a object like new canvas2pdf.PdfContext(stream) , however it seem can not be selected the draw region by
canvas id selector.
how can i assign the region where i want to plot into canvas? can i hope do that?
Best
hanhuihong
Hi Developer,
<link rel="stylesheet" href="/api/static/web/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
<script src="/api/static/web/js/jquery-3.6.0.min.js"></script>
<script src="/api/static/web/js/pdfkit.js"></script>
<script src="/api/static/web/js/blob-stream.js"></script>
<script src="/api/static/web/js/canvas2pdf.js"></script>
var ctx = new canvas2pdf.PdfContext(blobStream());
//draw your canvas like you would normally
ctx.fillStyle = 'yellow';
ctx.fillRect(100, 100, 100, 100);
// more canvas drawing, etc...
//convert your PDF to a Blob and save to file
ctx.stream.on('finish', function () {
var blob = ctx.stream.toBlob('application/pdf');
saveAs(blob, 'example.pdf', true);
});
ctx.end()
when i runing above code, it show me the error:
Had any advices for this issue?
Best
For example, fabric.js can create a canvas. Can I use this canvas or somehow convert to mock canvas used by canvas2pdf in order to create a pdf from it?
I'm Using in Angular 8, When i call
var ctx = new canvas2pdf.Context(blobStream());
its throw - blobStream is not defined
Hi again,
I am still testing your library and found a problem with the fill() function.
The following is suppose to produce a red rectangle with black border:
ctx.beginPath();
ctx.moveTo(170, 80);
ctx.rect(20,20,150,100);
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.stroke();
Like this one:
But instead I just get a red rectangle without border:
I copied canvas2pdf.js
from dist
and require it from ViolentMonkey.
The browser throws:
Uncaught TypeError: (intermediate value)[Symbol.iterator] is not a function
I don't think it can't run on browser, but do I forget anything?
For dual compatibility between native browser context and canvas2pdf context, this call can solve a otherwise difficult (or performance costly) problem.
See dankrusi@71904d5
If you wish to write applications that can draw to either context (a browsers native canvas context or the canvas2pdf context)
and be fully compatible with each other, one should stick to the supported context API calls
provided by canvas2pdf.
If you wish to call a fill() and stroke() consecutively,
you should use the PDF-style call fillAndStroke() instead with the following compatibility
extensions for the browser canvas:
Object.defineProperty(CanvasRenderingContext2D.prototype, 'fillAndStroke', {
value: function () {
this.fill();
this.stroke();
}
});
For example, if your application used to have drawing calls similar to:
ctx.beginPath();
ctx.arc(...);
ctx.lineTo(...);
ctx.lineTo(...);
ctx.closePath();
ctx.fill();
ctx.stroke();
...you would update those calls to use fillAndStroke():
ctx.beginPath();
ctx.arc(...);
ctx.lineTo(...);
ctx.lineTo(...);
ctx.closePath();
ctx.fillAndStroke();
Your library works great, but we've encountered a problem when used with AMD and require.js.
You are explicitly calling for global PDFDocument
, which causes a problem as this dependency should be defined in define
for AMD. pdfkit
also supports AMD so it's not possible to shim it to global without ugly exposing PDFDocument
to global.
Would be great if you could fix this, or let me know if you are open to PRs.
Hi there,
I'm trying to use this module without nodejs, but I'm getting an error telling me PdfContext is undefined. Here is my code for reference:
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="blob-stream.js"></script>
<script src="file-saver.min.js"></script>
<script src="canvas2pdf.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
...
</body>
</html>
The file canvas2pdf.min.js
above is the /dist/canvas2pdf.js
file
(index.js)
// Create a new PDF canvas context.
const ctxPdf = new PdfContext(blobStream());
// draw your canvas like you would normally
ctxPdf.fillStyle = "yellow";
ctxPdf.fillRect(100, 100, 100, 100);
// more canvas drawing, etc...
// convert your PDF to a Blob and save to file
ctxPdf.stream.on("finish", function () {
var blob = ctxPdf.stream.toBlob("application/pdf");
saveAs(blob, "example.pdf", true);
});
ctxPdf.end();
And this is the error the browser is throwing Uncaught ReferenceError: PdfContext is not defined
Any idea what I'm doing wrong?
I would like to use canvas2pdf inside node.js. My main idea is to put the js inside AWS Lambda and whenever a request comes, I would like to create a pdf and put to S3. But I cannot find how to do it without blobStream. Is there any example regarding this? Thank you.
It's a shame the library doesn't support context transformation, ie the following
ctx.setTransform(2,1,.5,1,0,1);
has no effect on the pdf image
Hey!
Trying to get this working with Nextjs 13.
Getting errors like:
ReferenceError: PDFDocument is not defined
at new canvas2pdf.PdfContext
I'm using it as a client side component.
Any chance anyone has an idea or example how usage with nextjs?
From canvas2svg page:
You can use canvas2svg with node.js using jsdom with node-canvas. To do this first create a new document object, and then create a new instance of C2S based on that document:
var canvas = require('canvas'),
jsdom = require('jsdom'),
C2S = require('canvas2svg');var document = jsdom.jsdom();
var ctx = new C2S({document: document});// ... drawing code goes here ...
Do we need to do the same in order to use canvas2pdf in node.js? Whats the benefit of jsdom?
I need to make a multi-page PDF but the function ctx.addPage() is missing.
Adding the following in the file canvas2pdf.js file solved it.
/**
* Add a new page
*/
canvas2pdf.PdfContext.prototype.addPage = function () {
this.doc.addPage();
};
The function scale(x) with one parameter works fine.
But when you try to use a second parameter scale(x,y) it doesn't work
(where x : scale of the width, y : scale of the height).
To solve that, I used the pdfkit transform function instead of scale:
// canvas2pdf.PdfContext.prototype.scale = function (x, y) {
// this.doc.scale(x, y);
// };
canvas2pdf.PdfContext.prototype.scale = function (x, y=x) {
this.doc.transform(x,0,0,y,0,0);
};
I have a couple of iframe with charts on my page. I was able to download the pdf for a particular DOM element but it doesn't capture iframe. any thoughts?
The clip() function seem to be implemented in the file 'canvas2pdf.js':
canvas2pdf.PdfContext.prototype.clip = function () { this.doc.clip(); } ;
But when I try to use it with this example from https://www.w3schools.com/tags/canvas_clip.asp, it doesn't work:
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Clip a rectangular area ctx.rect(50, 20, 200, 120); ctx.stroke(); ctx.clip(); // Draw red rectangle after clip() ctx.fillStyle = "red"; ctx.fillRect(0, 0, 150, 100);
Am I missing something ?
I think there is a bug with ctx.arc() when used with ctx.fill().
Here is an example:
ctx.beginPath();
ctx.moveTo(300,300); //0
ctx.lineTo(300,270); //1
ctx.lineTo(180,270); //2
ctx.arc(180,220,50,1/2*Math.PI,Math.PI,false);
ctx.lineTo(130,100); //4
ctx.lineTo(100,100); //5
ctx.lineTo(100,220); //6
ctx.arc(180,220,80,Math.PI,1/2*Math.PI,true);
ctx.lineTo(300,300); //0
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
To fix it, I rewrote arc() as following:
function myArc(x0,y0,r,a0,a1,counterclockwise){
var delta=0.1;
if(a0>a1 && counterclockwise==false){a1+=2*Math.PI;}
if(a1>a0 && counterclockwise==true){a0+=2*Math.PI;}
if(counterclockwise==true){
for (var a=a0; a>=a1; a-=delta) {
ctx.lineTo(x0+r*Math.cos(a),y0+r*Math.sin(a));
}
}else{
for (var a=a0; a<=a1; a+=delta) {
ctx.lineTo(x0+r*Math.cos(a),y0+r*Math.sin(a));
}
}
}
ctx.beginPath();
ctx.moveTo(300,300); //0
ctx.lineTo(300,270); //1
ctx.lineTo(180,270); //2
myArc(180,220,50,1/2*Math.PI,Math.PI,false);
ctx.arc(180,220,50,1/2*Math.PI,Math.PI,false);
ctx.lineTo(130,100); //4
ctx.lineTo(100,100); //5
ctx.lineTo(100,220); //6
myArc(180,220,80,Math.PI,1/2*Math.PI,true);
ctx.lineTo(300,300); //0
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
Maybe the start-angle and end-angle are inverted for some cases in your code.
https://github.com/Automattic/node-canvas#pdf-output-support
good luck to all
Hi,
Could you implement the arcTo(x1, y1, x2, y2, radius) function, please?
Your library is great but it is missing the very function I use all the time.
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.