I would like to display in a html page 4 canvas and each of them correspond to a page of a pdf file.
I succeed to display 1 page in 1 canvas, but when I want to display the 4 it doesn't work : none of the pages are displayed.
What I'm doing wrong ?
EDIT :
I tried to solve the problem of the promise (I edited my code) but now I got another error : Error: Invalid page request pdf.js:2687:31 and here is the corresponding code (2697 is the line of the return) :
getPage: function WorkerTransport_getPage(pageNumber, capability) {
if (pageNumber <= 0 || pageNumber > this.numPages ||
(pageNumber|0) !== pageNumber) {
return Promise.reject(new Error('Invalid page request'));
}
Here is my code :
html file :
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer"/>
<title>My page</title>
</head>
<body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
Javascript file (pdf.latex.main.js) :
PDFJS.disableStream = true;
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i < 4; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context);
}
});
function openPage(pdfFile, pageNumber, context) {
var scale = 5;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "100%";
canvas.style.height = "100%";
wrapper.style.width = Math.floor(viewport.width / scale) + 'pt';
wrapper.style.height = Math.floor(viewport.height / scale) + 'pt';
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render(renderContext);
});
}
You are using promises, so all your calls to the function in .then branch are done after your for loop is finished, i.e. with i equal to 3 (last iteration value). As a result, you're filling the same canvas 3 times. By the way, take a look at your for loop. It loops only 3 times. You may want to change loop condition to i<=4.
You should call PDFJS.getDocument before the loop, and call this loop from within promise.
I finally solved it, here is the solution :
pdf.latex.main.js
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i <= 4; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context);
}
});
function openPage(pdfFile, pageNumber, context) {
var scale = 5;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "50%";
canvas.style.height = "50%";
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render(renderContext);
});
}
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer" />
<title>My page</title>
</head>
<body>
<form action="pdf_latex_test.php">
<input type="submit" value="execute" /> </form>
</body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
Related
In theory it should be as easy as :
//targetCanvas is a canvas node
//app is instance of PIXI.Application
targetCanvas.drawImage(app.view, 0, 0);
But, trust me, It doesn't work!
Sometime (yes, I said sometime) it does work if I add some delay before copying the image into the targetCanvas. ... So, I wonder if there is an asynchronous process happening when PIXI is rendering... but I can not find this information in PIXI's documentation.
var loadImage = async function(imgPath) {
return new Promise((resolve, reject) => {
var img = document.createElement("img");
img.onload = ()=> {
resolve(img);
}
img.src = imgPath;
})
}
var canvasTag = document.querySelector("#canvasVideo");
var canvasCtx = canvasTag.getContext("2d");
var canvasResult = document.querySelector("#canvasResult");
var canvasResultCtx = canvasResult.getContext("2d");
var canvasWidth = canvasTag.width;
var canvasHeight = canvasTag.height;
var canvasWidth = 320;
var canvasHeight = 240;
const app = new PIXI.Application({
view: document.querySelector("#glCanvas"),
transparent: true,
width: canvasWidth,
height: canvasHeight
});
const container = new PIXI.Container();
const renderer = PIXI.autoDetectRenderer();
app.stage.addChild(container);
(async ()=> {
var imgTag = await loadImage("data:image/png;base64,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");
canvasCtx.drawImage(imgTag, 0, 0, canvasWidth, canvasHeight);
var bgSprite = PIXI.Sprite.from(imgTag);
app.stage.addChild(bgSprite);
canvasResultCtx.drawImage(document.querySelector("#glCanvas"), 0, 0);
})()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://pixijs.download/release/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="canvasVideo" width="320" height="240" autoplay></canvas>
<canvas id="glCanvas" width="320" height="240" autoplay></canvas>
<canvas id="canvasResult" width="320" height="240" autoplay></canvas>
</body>
</html>
canvasVideo (left) is normal canvas with 2d context.
glCanvas (middle) is a PIXI's view
canvasResult (right) is a normal canvas where a PIXI view should be copied into.
We don't have any problem copying canvas into PIXI. (except the CORS prevents the webGL renders the image correctly)
But, as you can see, the third canvas is blank. I wonder if there is any solution to this issue... without using PIXI's ticker or setTimeout?
You don't need to use the PIXI ticker or a custom timer (requestAnimationFrame as in your own response) to render to the canvas. There's the possibility to simply call app.render() in a synchronous way after the desired elements are added to the stage.
On top of that, if you want to prevent having a running application that renders on each frame, you may want to add autoStart: false to your Application config.
var loadImage = async function(imgPath) {
return new Promise((resolve, reject) => {
var img = document.createElement("img");
img.onload = ()=> {
resolve(img);
}
img.src = imgPath;
})
}
var canvasWidth = 320;
var canvasHeight = 240;
const app = new PIXI.Application({
view: document.querySelector("#glCanvas"),
transparent: true,
width: canvasWidth,
height: canvasHeight,
autoStart: false,
});
(async () => {
var imgTag = await loadImage("data:image/png;base64,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");
var bgSprite = PIXI.Sprite.from(imgTag);
app.stage.addChild(bgSprite);
app.render();
})()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://pixijs.download/release/pixi.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="glCanvas" width="320" height="240"></canvas>
</body>
</html>
The ticker is not used for non-animated sprites, but apparently pixi still needs ONE frame to draw everything before you can copy it.
I was able to solve your issue with one requestAnimationFrame
(async ()=> {
var imgTag = await loadImage("data:image/png;base64,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");
canvasCtx.drawImage(imgTag, 0, 0, canvasWidth, canvasHeight);
var bgSprite = PIXI.Sprite.from(imgTag);
app.stage.addChild(bgSprite);
requestAnimationFrame(() => {
canvasResultCtx.drawImage(document.querySelector("#glCanvas"), 0, 0);
});
})()
I'm trying to make a game with canvas but I have a problem. my problem is with the const ctx = canvas.getContext("2d");
I have the error Cannot read property 'getContext' of null
I looked at the other posts nothing helped my problem
(I don't use jquery)
thank you in advance for your future answers <3
Here is my HTML code and JS CODE :
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Human Run</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Human Run</h1>
<div class="score-container">
<div id="bestScore"></div>
<div class="currentScore"></div>
</div>
</header>
<canvas class="landscape" id="fond" width="350" height="416"></canvas>
<canvas class="ground" id="sol" width="350" height="150"></canvas>
<script src="./script.js" type="text/javascript" ></script>
<script src="./ground.js" type="text/javascript" ></script>
</body>
</html>
JS CODE :
const canvas = document.getElementById('sol');
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = '.media/ground2.png';
// réglages général
const speed = 6.2;
const render = () => {
index++;
// background
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, -((index * (speed / 2)) % canvas.width) + canvas.width, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, -((index * (speed / 2)) % canvas.width), 0, canvas.width, canvas.height);
window.requestAnimationFrame(render);
}
img.onload = render;
Your problem seems to be simply that your javascript loads before your html, as a result, your javascript tries to use an element("sol") that does not exist at the time because it is not there yet. Two solutions either put async on your javascript <script> tag
https://www.w3schools.com/tags/att_script_async.asp
or surround your code with document.addEventListener("DOMContentLoaded",()=>{/* your code goes here*/});
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
document.addEventListener("DOMContentLoaded",()=>{
const ctx = sol.getContext("2d");
const img = new Image();
let index = 0;
img.src = 'http://fc04.deviantart.net/fs70/i/2012/014/c/9/rpg_floor_tiles_02_by_neyjour-d4me7dx.jpg';
// réglages général
const speed = 6.2;
const render = () => {
index++;
// background
ctx.drawImage(img, 0, 0, sol.width, sol.height, -((index * (speed / 2)) % sol.width) + sol.width, 0, sol.width, sol.height);
ctx.drawImage(img, 0, 0, sol.width, sol.height, -((index * (speed / 2)) % sol.width), 0, sol.width, sol.height);
window.requestAnimationFrame(render);
}
img.onload = render;
});
<header>
<h1>Human Run</h1>
<div class="score-container">
<div id="bestScore"></div>
<div class="currentScore"></div>
</div>
</header>
<canvas class="landscape" id="fond" width="350" height="416"></canvas>
<canvas class="ground" id="sol" width="350" height="150"></canvas>
I am trying to save my canvas which include image. I was trying use toDataURL, but it doesn't work on this case. The canvas is work to input the image inside.
HTML
<img src="bg.png" id="toIMG" />
<canvas></canvas>
<img alt="UNCHANGED" id="getCtx">
<span>Why does the img doesn't change?</span>
JS
window.onload = function(){
var c, ctx, img, img2;
c = document.querySelector("canvas");
ctx = c.getContext("2d");
img = document.getElementById("toIMG");
ctx.drawImage(img, 0,0, c.width, c.height);
img2 = document.getElementById("getCtx");
img2.src = ctx.canvas.toDataURL("image/png");
}
Instead of running the function when window has loaded, run it when the img has loaded. Also, as #CrissCrossCrass has pointed out, toDataURL is a method of canvas but not context.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<img
id="toIMG"
src="https://source.unsplash.com/random/120x120"
crossorigin="anonymous"
/>
<canvas></canvas>
<img id="getCtx" />
<script>
var c = document.querySelector("canvas");
var img = document.getElementById("toIMG");
var img2 = document.getElementById("getCtx");
var ctx = c.getContext("2d");
img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0, c.width, c.height);
img2.src = c.toDataURL("image/png");
};
</script>
</body>
</html>
Also, you may want to set the crossOrigin attribute of the first img element to be anonymous to avoid tainted canvas. Read more about it
I tried that and actually it's working. Share if the console drops any error. Then i'll update my answer depending on it.
The code below says that spike.image.width = 0. Why is this? I'm probably missing something that is obvious.
class Spike {
constructor(x = 200, y = 200) {
this.x = x;
this.y = y;
this.image = new Image();
this.image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIBO-v6hQoEBhzmZ05mKzgYqrsZ0svgsED7IDR4dIVNxc78uc2";
}
}
const ctx = document.getElementById("canvas").getContext("2d");
const spike = new Spike;
console.log(spike.image.width);
<!DOCTYPE html>
<html>
<head>
<link href="css/default.css" rel="stylesheet" />
</head>
<body>
<canvas id="canvas" width="400" height="600"></canvas>
<script src="js/main.js"></script>
</body>
</html>
When the console.log fires, the image hasn't fully loaded yet. You have to check for when the image has loaded
const spike = new Spike;
spike.image.onload = function()
{
console.log(spike.image.width);
}
I have a pdf with 4 pages, each of the page has a transparent background. I use pdf.js to display them, but I would like to display them with a transparent background on my html page but I can't figure out how I could do that, there is always a white background :
I think it is possible according to this issue, but when I change the line page.render(renderContext); to page.render({renderContext, viewport, backgroundColor: 'rgba(0,0,0,0)' }); (as it said in the issue) I have the following error :
Any idea on how I could manage that ?
I use pdf.js version v1.9.426 and Firefox 55.0.2 (64 bits).
EDIT :
With the following code I have no error in the console but the background of my pdf file is still white. (However, If open the pdf with for example photoshop there is no background)
Link to the PDF file I use : tempPDF.pdf
Here is my javascript file to display the four pages :
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i <= 5; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context, 50);
}
});
function openPage(pdfFile, pageNumber, context, ratio) {
var scale = 10;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = ratio+"%";
canvas.style.height = ratio+"%";
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render({canvasContext: context, viewport: viewport, backgroundColor: 'rgba(0,0,0,0)' });
//page.render(renderContext);
});
}
And my html page in case that could be useful :
<!DOCTYPE html>
<html>
<body
style="background-color:powderblue;">
</body>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer" />
<title>My page</title>
</head>
<body>
<form action="pdf_latex_test.php">
<input type="submit" value="execute" /> </form>
</body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
The change and API documentation shows that property name must be background:
var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf';
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
// Use transparent background!
background: 'rgba(0,0,0,0)',
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
#the-canvas {
border:1px solid black;
background-image: url(http://image.blingee.com/images19/content/output/000/000/000/7c8/805674825_1628628.gif?6);
}
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<canvas id="the-canvas"></canvas>