I'm trying to work with a texture atlas and the canvas tag to do some animation. I don't get any errors but all I am seeing is the last frame. Is there something I should be doing so I see all the "frames"?
I have tested this with hard coding the x/y coordinates on the texture atlas so I know I can cruise around it.
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Animation</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">
<!-- javascript -->
<script language="javascript">
var textureAtlas = new Image();
var moeImg = new Image();
function init() {
animateProps = new Array;
textureAtlas.src = "images/textureatlast1.png";
moeImg.src = "images/moe.jpg";
var textureAtlasCoords = new Array("0,0", "100,0", "200,0", "300,0", "400,0", "500,0", "600,0");
for(var c=0; c<textureAtlasCoords.length; c++) {
animateObj = new Object();
var thisCoord = textureAtlasCoords[c];
var thisCoordSplit = thisCoord.split(",");
var thisX = thisCoordSplit[0];
var thisY = thisCoordSplit[1];
//var a = setTimeout(Function(){animate(ctx, textureAtlas, thisX, thisY)},1000);
animateObj['canvasId'] = "princessAnimation";
animateObj['imgsrc'] = textureAtlas;
animateObj['x'] = thisX;
animateObj['y'] = thisY;
animateProps.push(animateObj);
var a = setInterval(function(){animate(animateProps);},1000);
}
clearInterval(a);
}
function imgDraw(ctx, thisImg) {
console.log(thisImg);
//(image, x(
ctx.drawImage(thisImg,0,0, 1024, 451, 0, 0, 1024, 451);
}
function animate() {
//get animation properties
for(thisProp in animateProps) {
var canvasId = animateProps[thisProp]['canvasId'];
var thisImg = animateProps[thisProp]['imgsrc'];
var thisX = animateProps[thisProp]['x'];
var thisY = animateProps[thisProp]['y'];
}
var canvas = document.getElementById(canvasId);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,1024,451);
ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);
}
}
</script>
<!-- stylesheets -->
<!--conditional comments -->
</head>
<body onload="init();">
<div id="animationWrapper">
<canvas width="100" height="150" id="princessAnimation"></canvas>
</div>
</body>
</html>
Here's the image I am working with (Note: I know my coordinates are off per the file, right now I am just trying to get the transition to work, I'll then fine tune the x/y coordinates (of course unless you want to do that for me. : D )
It's the interval. You're setting them all before animate is ever fired, overwriting the previous interval. So you just keep printing out the 0,600 coordinate. It's not the only thing wrong from what I can see, but it's the reason you're only getting the last image.
Push each coordinate, then use the interval to loop through the animations. Don't set the interval until all of them are pushed, then use a global to count the steps, increment on animation (upon redrawing to the canvas).
For example (simplified, and this may need some work to get working the way you want):
var textureAtlas = new Image(),
steps = 0, maxsteps = 0;
//var moeImg = new Image();
var a;
function init() {
animateProps = new Array;
textureAtlas.src = "textureatlas1.png";
//moeImg.src = "images/moe.jpg";
var textureAtlasCoords = new Array("0,0", "100,0", "200,0", "300,0", "400,0", "500,0", "600,0");
maxsteps = textureAtlasCoords.length;
for(var c=0; c<textureAtlasCoords.length; c++) {
animateObj = new Object();
var thisCoord = textureAtlasCoords[c];
var thisCoordSplit = thisCoord.split(",");
var thisX = thisCoordSplit[0];
var thisY = thisCoordSplit[1];
//var a = setTimeout(Function(){animate(ctx, textureAtlas, thisX, thisY)},1000);
animateObj['canvasId'] = "princessAnimation";
animateObj['imgsrc'] = textureAtlas;
animateObj['x'] = thisX;
animateObj['y'] = thisY;
animateProps.push(animateObj);
}
a = setInterval(function(){animate(animateProps);},1000);
}
function animate() {
if(steps>=maxsteps) steps =0;
//get animation properties
var canvasId = animateProps[steps]['canvasId'];
var thisImg = animateProps[setps]['imgsrc'];
var thisX = animateProps[steps]['x'];
var thisY = animateProps[steps]['y'];
var canvas = document.getElementById(canvasId);
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,1024,451);
console.log(thisX+" "+thisY);
ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);
}
steps++;
}
I'm also not so sure on ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);... I feel like you're not binding the image to the right parameters. Remember that ctx.drawImage is
img, sx, sy, sw, sh, dx, dy, dw, dh for the args.
img - the image.
sx, sy, sw, sh - clip to the rectangle defined by this.
dw, dh - scale to these dimensions
dx, dy - position here.
Hope that helps some.
Related
I can scan the marker as I want to, however now I need my code to be able to scan the markers location and treat it as it is my mouseX and mouseY.
// https://kylemcdonald.github.io/cv-examples/
// more here:
// http://fhtr.org/JSARToolKit/demos/tests/test2.html
var capture;
var w = 640,
h = 480;
var raster, param, pmat, resultMat, detector;
function setup() {
pixelDensity(1); // this makes the internal p5 canvas smaller
capture = createCapture({
audio: false,
video: {
width: w,
height: h
}
}, function() {
console.log('capture ready.')
});
capture.elt.setAttribute('playsinline', '');
createCanvas(w, h);
capture.size(w, h);
capture.hide();
raster = new NyARRgbRaster_Canvas2D(canvas);
param = new FLARParam(canvas.width, canvas.height);
pmat = mat4.identity();
param.copyCameraMatrix(pmat, 100, 10000);
resultMat = new NyARTransMatResult();
detector = new FLARMultiIdMarkerDetector(param, 2);
detector.setContinueMode(true);
}
function draw() {
image(capture, 0, 0, w, h);
canvas.changed = true;
var thresholdAmount = 128; //select('#thresholdAmount').value() * 255 / 100;
detected = detector.detectMarkerLite(raster, thresholdAmount);
select('#markersDetected').elt.innerText = detected;
for (var i = 0; i < detected; i++) {
// read data from the marker
// var id = detector.getIdMarkerData(i);
// get the transformation for this marker
detector.getTransformMatrix(i, resultMat);
// convert the transformation to account for our camera
var mat = resultMat;
var cm = mat4.create();
cm[0] = mat.m00, cm[1] = -mat.m10, cm[2] = mat.m20, cm[3] = 0;
cm[4] = mat.m01, cm[5] = -mat.m11, cm[6] = mat.m21, cm[7] = 0;
cm[8] = -mat.m02, cm[9] = mat.m12, cm[10] = -mat.m22, cm[11] = 0;
cm[12] = mat.m03, cm[13] = -mat.m13, cm[14] = mat.m23, cm[15] = 1;
mat4.multiply(pmat, cm, cm);
// define a set of 3d vertices
var q = 1;
var verts = [
vec4.create(-q, -q, 0, 1),
vec4.create(q, -q, 0, 1),
vec4.create(q, q, 0, 1),
vec4.create(-q, q, 0, 1),
// vec4.create(0, 0, -2*q, 1) // poke up
];
// convert that set of vertices from object space to screen space
var w2 = width / 2,
h2 = height / 2;
verts.forEach(function (v) {
mat4.multiplyVec4(cm, v);
v[0] = v[0] * w2 / v[3] + w2;
v[1] = -v[1] * h2 / v[3] + h2;
});
noStroke();
fill(0, millis() % 255);
beginShape();
verts.forEach(function (v) {
vertex(v[0], v[1]);
});
endShape();
}
}
* {
font-family: sans-serif;
}
<html>
<head>
<meta charset="UTF-8">
<title>MarkerTracking</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
<script src="//kig.github.io/JSARToolKit/demos/magi.js"></script>
<script src="//kig.github.io/JSARToolKit/JSARToolKit.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>cv-examples Marker Tracking source</h2>
<p>Track an AR marker. Take a picture of one of these markers. Make sure it has a white border.</p>
<!-- <p>Threshold: <input type="range" id="thresholdAmount" value="50"></p>-->
<p>Markers detected: <span id="markersDetected"></span></p>
<script src="sketch.js"></script>
</body>
</html>
The snippet might give an error since it is trying to access the camera to scan the marker.
I have tried creating new variables and starting a brand new detection process which didn't work. I am open to any ideas.
Problem:
I am learning p5.js and I am following a tutorial from Coding Train YouTube channel. Everything was fine until I had to call a library function on an Image object. The problem is that I have instantiated the library in an object p and I'm using it's variables through p object. I don't know why it isn't recognizing the loadPixels() function. In the tutorial, the function works fine.
Error Message:
🌸 p5.js says: There's an error as "loadPixels" could not be called as a function
(on line 17 in help.html [file:///G:/Android/help.html:17:11]).
Verify whether "img" has "loadPixels" in it and check the spelling, letter-casing (Javacript is case-sensitive) and its type.
For more: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_a_function#What_went_wrong
Code:
<!DOCTYPE html>
<head>
<script src='p5/p5.js'></script>
</head>
<body>
<div id='container'></div>
<script>
let sketch = function(p) {
p.setup = function(){
p.createCanvas(56, 56);
img = new Image();
img.src = "scott.jpg";
}
p.draw = function() {
// p.drawingContext.drawImage(img, 0, 0);
p.loadPixels();
img.loadPixels();
for (var x=0; x<p.width; x++) {
for (var y=0; y<p.height; y++) {
// var d = p.dist(x, y, p.width/2, p.height/2);
var loc = x+y+p.width;
// p.pixels[loc] = p.color(d);
p.pixels[loc] = img.pixels[loc];
}
}
}
p.updatePixels();
};
new p5(sketch, 'container');
</script>
</body>
</html>
Edit:
As someone pointed out that the problem is that I'm using Image() which is the default Image class for javascript. I did some changes to my code but now it gives me this error.
Error :-
Uncaught DOMException: The operation is insecure. help.html:18
openWindow file:///G:/Android/help.html:18
onclick file:///G:/Android/help.html:1
Code :-
<!DOCTYPE html>
<head>
<script src='p5/p5.js'></script>
</head>
<body>
<button onclick="openWindow()">click me to open a new window.</button>
<div id='container'></div>
<script>
function openWindow() {
var newWindow = window.open("", "Import Image", "height=56,width=56,status=yes,toolbar=no,menubar=no,location=no");
newWindow.document.write("<canvas id='imagePlaceholder'>Canvas not supported!</canvas>");
var canvas = newWindow.document.getElementById("imagePlaceholder");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// console.log(ctx.getImageData(0, 0, 56, 56).data);
dest = ctx.getImageData(0, 0, 56, 56).data;
}
let sketch = function(p) {
p.setup = function(){
p.createCanvas(56, 56);
img = new Image();
img.src = "scott.jpg";
let dest = p.createImage(56, 56);
console.log(img);
}
p.draw = function() {
// p.drawingContext.drawImage(img, 0, 0);
// p.loadPixels();
img.loadPixels();
for (var x=0; x<p.width; x++) {
for (var y=0; y<p.height; y++) {
// var d = p.dist(x, y, p.width/2, p.height/2);
var loc = x+y+p.width;
// p.pixels[loc] = p.color(d);
p.pixels[loc] = img.pixels[loc];
}
}
}
p.updatePixels();
};
new p5(sketch, 'container');
</script>
</body>
</html>
Because you are specifically trying to load an image from a local computer as opposed to a publicly accessible URL, a file input with user interaction is going to be the only way to do this. This is a deliberate constraint put in place by web browsers to prevent a malicious webpage from illicitly reading data from your local files. However there is a much simpler way to get the image data from the file input onto your p5js canvas. In fact this exact use case can be seen in the documentation for the createFileInput function.
let input;
let img;
function setup() {
input = createFileInput(handleFile);
input.position(0, 0);
}
function draw() {
background(255);
if (img) {
image(img, 0, 0, width, height);
}
}
function handleFile(file) {
if (file.type === 'image') {
img = createImg(file.data, '');
img.hide();
} else {
img = null;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>
<body>
</body>
</html>
One obvious problem here is that you are using the builtin Image() constructor, which creates an HTMLImageTag (see the MDN Article) instead of creating a p5js p5.Image object (see the p5js Reference). However there are several other issues. In p5js you need to load images in the preload function to ensure they are available when you start drawing (this is an asynchronous operation). You'd have a much easier time drawing images in p5js using the built in image function. If you are going to use pixel arrays, you need to understand the structure of these arrays. They don't store Color objects, they store 4 separate numbers for each color channel (red, green, blue, and alpha). So the indices in the array are not (x + y * width), but ((x + y * width) * 4 + channel) where channel is a number from 0 to 3. Also you need to account for the fact that the canvas may have a pixel density > 1, whereas the image will have a pixel density of 1. I strongly suggest you read all of the documentation for the Image related p5js functions.
let sketch = function(p) {
let img;
p.preload = function() {
img = p.loadImage("https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/41645da792aef1c5054c33de240a52e2c32d205e.png");
};
p.setup = function() {
p.createCanvas(200, 200);
};
p.draw = function() {
// this would be a lot simpler way to draw the image:
// p.image(img, 0, 0);
p.loadPixels();
img.loadPixels();
// Handle high pixel density displays. This code effectively scale the image up so that each 1 pixel in the source image is density * density pixels in the display, thus preserving the size of the image but leading to visible pixelation.
let density = p.pixelDensity();
for (var x = 0; x < p.width && x < img.width; x++) {
for (var y = 0; y < p.height && y < img.height; y++) {
// There are 4 values per pixel in the pixels array:
var srcLoc = (x + y * img.width) * 4;
for (var xd = 0; xd < density; xd++) {
for (var yd = 0; yd < density; yd++) {
var destLoc =
(x * density + xd + (y * density + yd) * p.width * density) * 4;
for (var i = 0; i < 4; i++) {
p.pixels[destLoc + i] = img.pixels[srcLoc + i];
}
}
}
}
}
p.updatePixels();
};
};
new p5(sketch, 'container');
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>
<body>
<div id='container'></div>
</body>
</html>
Here is an alternate version of the snippet that handles pixelDensity differently:
let sketch = function(p) {
let img;
p.preload = function() {
img = p.loadImage("https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/41645da792aef1c5054c33de240a52e2c32d205e.png");
};
p.setup = function() {
p.createCanvas(200, 200);
};
p.draw = function() {
// this would be a lot simpler way to draw the image:
// p.image(img, 0, 0);
p.loadPixels();
img.loadPixels();
// Handle high pixel density displays. This code shrinks the image down by mapping one pixel in the source image to 1 / (density ^ 2) actual pixels in the canvas.
let density = p.pixelDensity();
for (var x = 0; x < p.width * density && x < img.width; x++) {
for (var y = 0; y < p.height * density && y < img.height; y++) {
// There are 4 values per pixel in the pixels array:
var srcLoc = (x + y * img.width) * 4;
var destLoc = (x + y * p.width * density) * 4;
for (var i = 0; i < 4; i++) {
p.pixels[destLoc + i] = img.pixels[srcLoc + i];
}
}
}
p.updatePixels();
};
};
new p5(sketch, 'container');
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
</head>
<body>
<div id='container'></div>
</body>
</html>
I tried a lot of things and almost giveup, but at the end I had to change the code a bit and this worked for me. Although what I got was base64 url as Alice in the comment suggested and I converted it into Uint8ClampedArray. Now if anyone wants a full image or all the pixels of an image then they can follow this link :- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas . I hope it will be helpful for anyone who wants to make an offline webcanvas based application and don't want to dabble with CORS.
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('accept', 'image/gif, image/jpeg, image/png');
fileSelector.click();
fileSelector.onchange = function(e) {
img = new Image();
var file = e.target.files[0];
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
var newWindow = window.open("", "_blank", "height=56,width=56,status=yes,toolbar=no,menubar=no,location=no");
newWindow.document.write("<canvas id='imagePlaceholder'>Canvas not supported!</canvas>");
var canvas = newWindow.document.getElementById("imagePlaceholder");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// console.log(ctx.getImageData(0, 0, 56, 56).data);
var dest = ctx.getImageData(0, 0, img.width, img.height).data;
console.log(dest);
newWindow.close();
}
I'm having an issue with drawImage() re-sizing a loaded image below a certain width and height. The image I'm trying to re-size is 1080x1920 and I want it to be re-sized to 540x960. If I apply drawImage() to reduce it to 764x1358, it works. But any resolution smaller than that (on either parameter) results in the image not being displayed on the canvas.
There is definitely some correlation between the lower bounds on the resolution, because both are approximately 70.7% of the original resolution. I'm wondering if there's an inherit limit on drawImage but I couldn't find any specification that said so.
Here's the relevant code:
var image = new Image();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = this.width * 2;
ctx.canvas.height = this.height;
$(image).on("load", function() {
ctx.drawImage(image, 0, 0, 764, 1358);
});
image.src = "test2.jpg";
I edited the code to show where image came from.
Full Code:
<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jcanvas.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1920" height="1920">
</canvas>
<script>
$(document).ready(
function() {
$("<img>").attr("src", "test2.jpg").on('load', function() {
var imgWidth, imgHeight;
var imageData;
var image = new Image();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = this.width * 2;
ctx.canvas.height = this.height;
$(image).on("load", function() {
/* This is where the image is loaded and
inserted into the canvas */
ctx.drawImage(image, 0, 0, 763, 1358);
});
image.src = "test2.jpg";
imageData = ctx.getImageData(0, 0,
this.width,
this.height);
/* This is just part of the image manipulation,
bland right now */
var newImgData = ctx.createImageData(imageData.width,
imageData.height);
for ( var i = 0; i < newImgData.data.length; i += 4) {
newImgData.data[i + 0] = 255;
newImgData.data[i + 1] = 0;
newImgData.data[i + 2] = 0;
newImgData.data[i + 3] = 255;
}
// ctx.putImageData(newImgData, imageData.width, 0);
});
});
</script>
</body>
</html>
Last Edit: I found out the solution.
As it turns out, my issue was the version of JQuery I was using. I was originally just version 1, but 1.8.3 fixed everything. So, the solution is to simply change
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
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.
I'm attempting to parse a tileset image (of type .png) into an array. I've got a test canvas that I'm using to draw it to first, then I am extracting the image info from it. When I run this code, it throws "Uncaught TypeError: Type error." I was able to log that this.mainTiles is empty. Any ideas? I don't know all the subtleties of Canvas yet, so I'm stuck. Thanks for the help! (Also, you can ignore the last line at the end, I was just using it to test--but I wanted to illustrate that it doesn't work).
function TileSet() {
this.tileSheets = [];
this.mainTiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var tileSheet = new Image();
try {
tileSheet.src = spriteSheetLoc;
}
catch(err) {
dMode.Log("Invalid TileSheet Src ( TileSet.setSpriteSheet() Failed ); ERR: " + err);
}
tempContext.drawImage(tileSheet, 0, 0);
var tilesX = tempContext.width / this.tileWidth;
var tilesY = tempContext.height / this.tileHeight;
for(var i=0; i<tilesY; i++) {
for(var j=0; j<tilesX; j++) {
// Store the image data of each tile in the array.
this.mainTiles.push(tempContext.getImageData(j*this.tileWidth, i*this.tileHeight, this.tileWidth, this.tileHeight));
}
}
context.putImageData(this.mainTiles[0], 5, 5);
}
Edit: Here are how the canvases and such are defined:
var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
var Tiles = new TileSet;
//this is the line it gets stuck at
Tiles.addSpriteSheet("resources/tiles/tilea2.png");
Edit 2: After markE's answer, here's the latest update. Still feel as though I'm missing a fundamental property regarding .onload.
function TileSet() {
this.Tiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.tileCount = 4;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var tileSheet = new Image();
tileSheet.onload = function() {
tempCanvas.width = tileSheet.width;
tempCanvas.height = tileSheet.height;
tempContext.drawImage(tileSheet, 0, 0);
for (var t=0;t<this.tileCount;t++) {
this.Tiles[t]=tempContext.getImageData(t*this.tileWidth,t*32,this.tileWidth,tileSheet.height);
dMode.Log(this.Tiles);
}
context.putImageData(this.Tiles[this.Tiles.length-1],0,0);
dMode.Log(this.Tiles);
}
tileSheet.src = spriteSheetLoc;
}
Here's how to parse a spritesheet into an array of separate canvas imageData
I have some working code that does what you want to do.
I didn't have your "resources/tiles/tilea2.png" so I used my own "monstersArun.png" which is a 10 across spritesheet of 64x64 tiles.
You can modify this code to fit your spritesheet layout ( rows x columns and tile size).
Here is the code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var tileCount=10;
var tiles=new Array();
var tileWidth;
var t;
var img=new Image();
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
tileWidth=img.width/tileCount;
ctx.drawImage(img,0,0);
for(var t=0;t<tileCount;t++){
tiles[t]=ctx.getImageData(t*tileWidth,0,tileWidth,img.height);
}
// just a test
// draw the last tiles[] into another canvas
var canvasTile=document.getElementById("canvasTile");
var ctxTile=canvasTile.getContext("2d");
canvasTile.width=tileWidth;
canvasTile.height=canvas.height;
ctxTile.putImageData(tiles[tiles.length-1],0,0);
}
img.src="monsterarun.png";
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br/>
<canvas id="canvasTile" width=64 height=64></canvas>
</body>
</html>
[Edit--to include Juan Mendes good idea give help on coding problem]
Also, as I look at your code...here:
tileSheet.src = spriteSheetLoc;
This causes your image to load. That loading takes time to do, so javascript starts loading the image, but it also immediately goes on to your next line of code. As a result, your code below tries to use the image before it's available--no good!
So you should give javascript a chance to fully load your image before processing the rest of your code. You do this using the onload method of Image like this:
var tileSheet = new Image();
tileSheet.onload=function(){
// put ALL you code that depends on the image being fully loaded here
}
tileSheet.src = spriteSheetLoc;
Notice how you put tileSheet.src after the onload function. In reality, javascript executes tilesheet.src and then goes back to execute all the code in the onload block!
[Edit again -- complete code]
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var tempCanvas = document.getElementById("tempCanvas");
var tempContext = tempCanvas.getContext("2d");
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");
// create a new TileSet
var Tiles = new TileSet();
// parse a spritesheet into tiles
//Tiles.addSpriteSheet("resources/tiles/tilea2.png","anyName");
Tiles.addSpriteSheet("houseIcon.png","anyName");
function TileSet() {
this.Tiles = [];
this.tileHeight = 32;
this.tileWidth = 32;
this.tileCount = 4;
this.addSpriteSheet = function (spriteSheetLoc, name) {
var me=this; // me==this==TileSet
var tileSheet = new Image();
tileSheet.onload = function() {
// calculate the rows/cols in the spritesheet
// tilesX=rows, tilesY=cols
var tilesX = tileSheet.width / me.tileWidth;
var tilesY = tileSheet.height / me.tileHeight;
// set the spritesheet canvas to spritesheet.png size
// then draw spritesheet.png into the canvas
tempCanvas.width = tileSheet.width;
tempCanvas.height = tileSheet.height;
tempContext.drawImage(tileSheet, 0, 0);
for(var i=0; i<tilesY; i++) {
for(var j=0; j<tilesX; j++) {
// Store the image data of each tile in the array.
me.Tiles.push(tempContext.getImageData(j*me.tileWidth, i*me.tileHeight, me.tileWidth, me.tileHeight));
}
}
// this is just a test
// display the last tile in a canvas
context.putImageData(me.Tiles[me.Tiles.length-1],0,0);
}
// load the spritesheet .png into tileSheet Image()
tileSheet.src = spriteSheetLoc;
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="tempCanvas" width=300 height=300></canvas><br/>
<canvas id="gameCanvas" width=300 height=300></canvas>
</body>
</html>
Try replacing tempContext.width and tempContext.height with tempCanvas.width and tempCanvas.height, respectively. I don't believe contexts have width/height.