I have the following JavaScript file:
var canvas = document.getElementById('Canvas'),
context = canvas.getContext('2d'),
image = new Image();
image.src = 'abc.jpg';
image.onload = function(){
var cols = image.width;
var rows = image.width;
canvas.width = cols;
canvas.height = rows;
context.drawImage(image, 0, 0, image.width, image.height);
};
The HTML file looks as follows:
<html>
<head>
<title>chapter1</title>
<script src="matrix.js">
</script>
</head>
<body>
<canvas id="Canvas"></canvas>
</body>
</html>
But, when I try to view the HTML page, I don't see the image, provided that all the files including the image are in the same directory.
What am I doing wrong?
Thanks.
Related
I have following code:
index.html
<!DOCTYPE html>
<html>
<head>
<!-- meta, title, etc -->
</head>
<body>
<input type="file" accept="image/*" id="imgin" /> <br />
<canvas id="canvas"></canvas>
<script type="text/javascript" src="./scripts/main.js"></script>
</body>
</html>
main.js
const imgin = document.getElementById('imgin');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
imgin.addEventListener('change', drawimage);
function drawimage() {
//draw_image
}
Now, I want to draw the Image on canvas when it is choosed.
How should I do so?
All I found were not putting image from <input> tag.
Here is jsfiddle: click.
Used HTML:
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
Used JS:
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function() {
ctx.drawImage(img, 0, 0, 400, 300);
}
}
const ctx = canvas.getContext('2d');
imgin.onchange = e => {
const file = imgin.files[0];
if(file) {
const reader = new FileReader();
reader.onload = () => {
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = reader.result;
};
reader.readAsDataURL(file);
}
}
<input type="file" accept="image/*" id="imgin" /> <br />
<canvas id="canvas"></canvas>
I've no idea why this doesn't work. The src attribute of the image is changed with the new data, but the image is not actually visible. I tried with several different images. It's just javascript in a browser and Jquery is required.
<body>
<img src="" id="test">
</body>
<script>
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
img.onload = getIt
img.src = 'download.png';
function getIt() {
canvas.width = this.width;
canvas.height = this.height;
const imageData = ctx.getImageData(0, 0, this.width, this.height);
ctx.drawImage(this, canvas.width , canvas.height);
ctx.putImageData(imageData, canvas.width, canvas.height);
$('#test').get(0).src = canvas.toDataURL("image/png");
}
</script>
I tried with several different images, all png. At the moment this is the entire code for the project so I don't foresee anything that could be interfering with it.
The result is this but the image cannot be seen:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAeCAYAAAAhDE4sAAAAMklEQVRIS+3SsQ0A....etc" id="test">
EDIT: It seems like it might be getting the data from the image incorrectly but I've no idea why...I mean why would it get the data but be incomplete or incorrect?
Please try this:
(You don't need to get or put the image data)
Also you were doing this:ctx.putImageData(imageData, canvas.width, canvas.height);. This means that you are drawing the image totally outside the canvas. Do this instead: ctx.putImageData(imageData, 0,0);
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new Image();
img.onload = getIt
img.src = "download.png";
function getIt() {
canvas.width = this.width;
canvas.height = this.height;
//draw the image onto the canvas
ctx.drawImage(this, 0,0);
//use the data uri
test.src = canvas.toDataURL("image/png");
}
<img src="" id="test">
i have a problem with canvas.
i can draw a canvas with single image, but i can't draw each canvas with image separate.
- if data just have one image it's working fine, but data have multiple image it's not working
can you help me ?
<script>
var h_notepad = 500;
var w_notepad = 737;
var data = [
{dataImageURL: "1_sat_1.png"},
{dataImageURL: "1_sat_2.png"},
{dataImageURL: "1_sat_3.png"},
{dataImageURL: "1_sat_4.png"}
];
for(var i = 0; i < data.length ; i++){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
canvas.width = w_notepad;
canvas.height = h_notepad;
img.crossOrigin = 'anonymous';
img.width = w_notepad;
img.height = h_notepad;
console.log(img);
img.onload = function(){
ctx.drawImage(img, 0, 0, w_notepad, h_notepad);
};
img.src = data[i].dataImageURL;
$('body').append(canvas);
}
</script>
<html>
<head>
<meta charset="utf-8">
<title>DRAWING</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
I guess you only get the last one.
It's a closure problem.
When the load event fires, img and ctx only refer to the last ones created.
So you draw data.length time on the same canvas.
To avoid it, you can use this and wrap the canvas creation in the onload handler:
var imgs = ['http://lorempixel.com/200/300/', 'http://lorempixel.com/500/300/', 'http://lorempixel.com/200/100/'];
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
var width = 500;
var height = 300;
img.onload = function() {
var c = document.createElement('canvas');
c.width = width;
c.height = height;
document.body.appendChild(c);
var ctx = c.getContext('2d');
ctx.drawImage(this, 0,0, width, height);
};
img.src = imgs[i];
}
Problem is that onload is asynchronous. So all your code runs before any of onload functions will be called. That is why your function
img.onload = function(){
ctx.drawImage(img, 0, 0, w_notepad, h_notepad);
};
uses the latest ctx and renders all images in this context.
What you can do is cover this asynchronous call with a synchronous function scope:
(function(ctx, img, w_notepad, h_notepad) {
img.onload = function(){
ctx.drawImage(img, 0, 0, w_notepad, h_notepad);
};
})(ctx, img, w_notepad, h_notepad);
This isolates the variables and keeps there values until you receive the image.
I am new to Javascript, I would like to modify the brightness of any remote image given in an input form.
I have tried to use Canvas but I got this issue.
I want the following code to work directly via "file:///test.html". How can I simply achieve that ?
<html>
<head>
<script type="text/javascript">
function readImg() {
img = new Image();
url = document.getElementById('url').value;
document.getElementById('showImg').innerHTML='<img src="'+ url +'" />';
img.src = url;
canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
img.crossOrigin = "Anonymous";
imgData = ctx.getImageData(0,0,canvas.width,canvas.height); // not working !!
brightness(imgData);
}
function brightness(imgData) {
var dataimg = imgData.data;
for (var i = 0; i < dataimg.size; i += 4 ) {
dataimg[i] += 10;
dataimg[i+1] += 10;
dataimg[i+2] += 10;
}
}
</script>
</head>
<body>
<input id="url" type="text" onChange="readImg()"></input>
<div id='showImg'></div>
</body>
</html>
You have to give Chrome explicit access to local files from local html files.
You have to run Chrome with --allow-file-access-from-files flag.
"C:\PathTo\Chrome.exe" --allow-file-access-from-files
You can find more info about it here as it was already discussed:
https://stackoverflow.com/a/18587027/4103991
#EDIT://
Execute commands related to img element inside img.onload event handler.
Your code should look somewhat like that:
<html>
<head>
<script type="text/javascript">
function readImg() {
img = new Image();
url = document.getElementById('url').value;
document.getElementById('showImg').innerHTML='<img src="'+ url +'" />';
canvas = document.createElement("canvas");
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
brightness(imgData);
}
img.src = url;
img.crossOrigin = "Anonymous";
}
function brightness(imgData) {
var dataimg = imgData.data;
for (var i = 0; i < dataimg.size; i += 4 ) {
dataimg[i] += 10;
dataimg[i+1] += 10;
dataimg[i+2] += 10;
}
}
</script>
</head>
<body>
<input id="url" type="text" onChange="readImg()"></input>
<div id='showImg'></div>
</body>
</html>
Why does the image not display to the canvas in this example?
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
/*
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
screen.lockOrientation('landscape');
if (lockOrientation("landscape-primary")) {
screen.lockOrientation('landscape');
}
*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 10;
var y = 10;
var width = 470;
var height = 310;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</head>
<body>
<canvas id="myCanvas" width="470" height="310" style="border:5px solid #123456;"></canvas>
</body>
</html>
You need to wait for the document to load before trying to select elements in the page.
Try wrapping your code like this:
window.onload = function() {
// your code goes here
};