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);
});
})()
Related
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.
i am trying to load images on a canvas from my local folder, this is my js script :
function loadElement(url) {
return new Promise((resolve) => {
const element = new Image();
element.addEventListener("load", () => {
resolve(element);
});
element.src = url;
});
}
//canvas
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
context.fillRect(0, 0, 50, 50);
loadElement("./tilesheet.png").then((element) =>
context.drawImage(element, 0, 0)
);
and my html script:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Surface</title>
<link rel="stylesheet" href="css/main.css" />
<script type="module" src="js/main.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
but i get this error:
GET http://127.0.0.1:5500/public/tilesheet.png 404 (Not Found)
and i dont understand why.
Your code loads fine with a known good image:
function loadElement(url) {
return new Promise((resolve) => {
const e = new Image();
e.addEventListener("load", () => { resolve(e); });
e.src = url;
});
}
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
context.fillRect(0, 0, 50, 50);
loadElement("http://i.stack.imgur.com/UFBxY.png")
.then((e) => context.drawImage(e, 0, 0));
<canvas id="canvas"></canvas>
My guess the error is right your image is not there: 404 (Not Found)
I need to upload an image and show it in canvas in browser. First time when I upload this image, canvas width and height are zero, but second time the image is appearing correctly? Why?
function previewFile() {
const canvas = document.getElementById('canvas');
const img = document.createElement('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
img.src = reader.result;
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./script.js"></script>
<title>Document</title>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<canvas id="canvas"></canvas>
</body>
</html>
When you setting the image src, it doesn't loaded synchonous, so you have to wait for image load event, and only then draw it on the canvas.
A lot of operations in JS connected with resources are of asynchronous nature, so you have to deal with it.
function previewFile() {
const canvas = document.getElementById('canvas');
const img = document.createElement('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
img.src = reader.result;
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
}
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./script.js"></script>
<title>Document</title>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<canvas id="canvas"></canvas>
</body>
</html>
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>
I want to get the color of a pixel from image with using pure JavaScript.
I wrote this script, but it did not work:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Get Pixel</title>
<script type='text/javascript'>
window.onload = function() {
var canvas = document.createElement("canvas");
var pic = new Image();
pic.src = 'http://i.imgur.com/hvGAPwJ.png';
pic.onload = function() {
canvas.width = pic.width;
canvas.height = pic.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(pic, 0, 0);}
var c = canvas.getContext('2d');
var p = c.getImageData(7, 7, 1, 1).data;
var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2];
document.getElementById("output").innerHTML = hex;
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
How to change the code, what would he worked correctly?
For example for the picture "http://i.imgur.com/hvGAPwJ.png", the result should be RGB = 255, 255, 255.
Your code is almost (see below) correct in its self BUT unfortunately when you use images from other origins than the page itself certain criteria must be there for it to work due to CORS (security feature).
You cannot use images from other origins out of the box. The server they are on need to have accept-* header set to allow this.
If not your getImageData and toDataURL will be blank (throws a security error that you can see in the console).
If you don't have access to modify the server the only way to get around this is to use your own server as a image proxy (http://myServer/getImage.cgi|php|aspx...?http/otherServer/img)
As pointed on in comments always set src after onload so you are sure onload gets initialized.
var pic = new Image();
pic.onload = function() { /* funky stuff here */ };
pic.src = 'http://i.imgur.com/hvGAPwJ.png'; //Last
If you indent your script properly, the error becomes more apparent:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Get Pixel</title>
<script type='text/javascript'>
window.onload = function() {
var canvas = document.createElement("canvas");
var pic = new Image();
pic.src = 'http://i.imgur.com/hvGAPwJ.png';
pic.onload = function() {
canvas.width = pic.width;
canvas.height = pic.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(pic, 0, 0);
}
var c = canvas.getContext('2d');
var p = c.getImageData(7, 7, 1, 1).data;
var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2];
document.getElementById("output").innerHTML = hex;
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
You are setting a function on the image's load event, but not waiting for it to happen before you update the contents of the div.
You should move everything inside the pic.onload function, apart from setting the pic.src:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Get Pixel</title>
<script type='text/javascript'>
window.onload = function() {
var canvas = document.createElement("canvas");
var pic = new Image();
pic.onload = function() {
canvas.width = pic.width;
canvas.height = pic.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(pic, 0, 0);
var c = canvas.getContext('2d');
var p = c.getImageData(7, 7, 1, 1).data;
var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2];
document.getElementById("output").innerHTML = hex;
}
pic.src = 'http://i.imgur.com/hvGAPwJ.png';
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
Now the problem is just cross origin restrictions.
To solve cross origins restrictions, you may add this line:
pic.crossOrigin = "Anonymous";
Right after defining pic var.
May not work in some cases though.