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.
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 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 got a problem with converting PNG image to webp format. The background turns black instead of remaining transparent.
How can I fix this?
var img = document.querySelector('#sample');
var webp = document.querySelector('#webp');
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
webp.src = canvas.toDataURL('image/webp');
};
img.src = 'data:image/png;base64,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';
<img id="sample">
<img id="webp">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="data:image/png;base64,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";
setTimeout(function(){cxt.drawImage(img,0,0);},2000);
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
this is my test with your picture,so I think there is no problem in your code.
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.