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.
Related
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 attempted to animate a sprite sheet using html and javascript to no avail. Here is my sprite sheet
Below is lines 36-59 of my code. I'm not getting any errors so I don't really know what's wrong. How do I fix/improve my code?
This is for a project I'm doing. I've tried using different methods I've found online but none really worked either. I've tried shifting the image as well.
<html>
<head>
<title>Tree Animation</title>
</head>
<body>
<canvas id='canvas'></canvas>
<script>
var canWidth = 400;
var canHeight = 100;
//position where the frame will be drawn
var x = 0;
var y = 0;
var srcX;
var srcY;
var sheetWidth = 230;
var sheetHeight = 79;
var frameCount = 5;
var width = sheetWidth/frameCount;
var height;
var currentFrame = 0;
var tree = new Image();
tree.src = "tree sprite.jpg"
var canvas = document.getElementById('canvas');
canvas.width = canWidth;
canvas.height = canHeight;
var ctx = canvas.getContext('2d');
function updateFrame(){
currentFrame = ++currentFrame%frameCount
srcX = currentFrame*width;
srcY = 0;
ctx.clearRect(x, y, width, height);
}
function draw(){
updateFrame();
}
setInterval(function(){
draw();
}, 100);
</script>
</body>
</html>
I expect the output to be an animation of a tree growing, but instead I'm getting a blank page.
you should provide more code or a snippet, there are several variables didn't show up in your code
and it's hard to debug your code if u use setInterval, you should make sure your code can work first.
maybe you can try step by step:
draw the whole img on the canvas first. if it works, go next
invoke your draw() function manually, check if the img drawed
invoke more, such assetTimout(draw, 1000), check the result
ok, and i think you can console.log these variables in draw
cutImageUp is a js script that's already been discussed in SE, here Shattering image using canvas. But I have a different question about using it. The html I try doesn't do anything. I'm sure that I've done a simple wrong, but I'm too much of a noob to see it.
The cutImageUp script:
<script type="text/javascript">
var image = new Image();
image.src = "letere.png"; image.onload = cutImageUp;
var imagePieces = [];
function cutImageUp() {
for(var x = 0; x < 5; x++) {
for(var y = 0; y < 5; y++) {
var canvas = document.createElement('canvas');
canvas.width = 50;
canvas.height = 50;
var context = canvas.getContext('2d');
context.drawImage(image, x *50, y * 50, 50, 50, 0, 0, 50, 50);
imagePieces.push(canvas.toDataURL());
}
}
var anImageElement = document.getElementById('img');
anImageElement.src = imagePieces[0];
}
</script>
My html:
<html>
<head>
<script src="cutImageUp.js"></script>
</head>
<body>
<img src="letere.png" onload="cutImageUp()" width="50" height="50">
</img>
</body>
</html>
When I run the page, the image appears, without the function applied. I might as well run the page without js. BTW, the files are in the same folder, and I tried using Base64, no luck.
Remove the <script> tags around the JavaScript code in cutImageUp.js. You only need those when you embed JS code in an HTML file.
Here's my html document:
<html>
<head>
<meta charset="utf-8">
<title>Automapper Editor</title>
</head>
<body>
<nobr>
<script>
var img = new Image()
img.src = "grass_main_0.7.png"
for(var y=0; y < 16; y++) {
for(var x=0; x < 16; x++) {
var tilecanvas = document.createElement("canvas")
var tilectx = tilecanvas.getContext("2d")
tilecanvas.width = 64
tilecanvas.height = 64
tilecanvas.draggable = true
tilectx.drawImage(img, x*64, y*64, 64, 64, 0, 0, 64, 64)
document.body.appendChild(tilecanvas)
}
document.body.appendChild(document.createElement("br"))
}
</script>
</nobr>
</body>
</html>
I want to split an image with the size of 1024 pixel in 16 images with the size of 64 pixel. Then i want to draw them on canvas and write them to the document. This are my problems:
The line tilecanvas.draggable = true doesn't work, this should do the same as <canvas draggable="true">.
The <nobr> tag doesn't prevent the canvas from wrapping, but i want them to stay 16x16 on the screen.
The first time you load the page you can't see the image, you can simulate this by pressing STRG+F5 (a.k.a. Ctrl-F5) in firefox.
You can solve it by:
Using a container div for the tiles
Set fixed width for container element
Adjust the CSS for canvas element to float
Live example
(note: added random alpha for the tiles/demo to increase visibility)
var img = new Image();
img.onload = render;
img.src = "http://www.psdgraphics.com/file/colorful-triangles-background.jpg";
function render() {
var cont = document.getElementById("cont");
for (var y = 0; y < 16; y++) {
for (var x = 0; x < 16; x++) {
var tilecanvas = document.createElement("canvas");
var tilectx = tilecanvas.getContext("2d");
tilecanvas.width = 64;
tilecanvas.height = 64;
tilecanvas.draggable = true;
tilectx.globalAlpha = Math.random() + 0.5; // just to increase visuals
tilectx.drawImage(img, x * 64, y * 64, 64, 64, 0, 0, 64, 64);
cont.appendChild(tilecanvas);
}
}
}
#cont {width: 1024px;border: 1px solid #000}
canvas {float:left}
<div id="cont"></div>
As said by RienNeVaPlu͢s & Ken Fyrstenberg, make sure you give your image time to load with onload.
Here's a proof-of-concept allowing html drag-drop of a spliced image-canvases:
https://jsfiddle.net/m1erickson/g9nfuved/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red; margin-left:0px;}
#dropzone{width:250px;height:50px;border:1px solid blue;}
</style>
<script>
$(function(){
var $results=$('#results');
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
function start(){
var w=img.width/4;
var h=img.height;
for(var x=0; x < 4; x++) {
var tilecanvas = document.createElement("canvas");
var tilectx = tilecanvas.getContext("2d");
tilecanvas.width = w;
tilecanvas.height = h;
tilecanvas.draggable = true
tilecanvas.id='canvas'+x;
tilectx.drawImage(img, x*w,0,w,h, 0, 0, w, h)
document.body.appendChild(tilecanvas)
tilecanvas.addEventListener('dragstart', function(e){
e.dataTransfer.setData('text',e.target.id);
}, false);
tilecanvas.addEventListener('dragenter', handleEvents, false);
tilecanvas.addEventListener('dragover', handleEvents, false);
tilecanvas.addEventListener('dragleave', handleEvents, false);
tilecanvas.addEventListener('dragend', handleEvents, false);
}
document.body.appendChild(document.createElement("br"))
var dropzone=document.getElementById('dropzone');
dropzone.addEventListener('dragover',function(e){e.preventDefault(); return(false);});
dropzone.addEventListener('dragenter',function(e){return(false);});
dropzone.addEventListener('drop',function(e){
$results.text('You dropped: '+e.dataTransfer.getData('text'));
return(false);
});
}
function handleEvents(e){ return(false); }
}); // end $(function(){});
</script>
</head>
<body>
<h4 id='results'>Drag 1+ of the image strips</h4>
<div id='dropzone' droppable='true'>Drop Here.</div>
</body>
</html>
I want to write code that can filter the source of an image and return the data that it can be used as source for an image tag in the DOM. Therfore I created a virtual canvas. At the moment it only works with a real canvas within the DOM, even though the dimension is wrong. I only want the converted image source and no canvas in the DOM.
this is how I need it but it doesn't work: js fiddle
this one works with wrong img dimension and unwanted canvas in the DOM: js fiddle2
js:
var image = new Image();
image.onload = function () {
var helperCanvas = document.createElement('canvas');
var ctx = helperCanvas.getContext('2d');
ctx.width = image.width;
ctx.height = image.height;
ctx.drawImage(image, 0, 0, helperCanvas.width, helperCanvas.height);
var imageData = ctx.getImageData(0, 0, helperCanvas.width, helperCanvas.height);
filter(imageData);
data_as_source = ctx.putImageData(imageData, 0, 0 ).toURL();
var img = new Image();
img.src = data_as_source;
context.drawImage(img,0,0);
}
image.src = ....
In your demo code, you should be changing the temporary canvas width/height, not the context’s.
helperCanvas.width = image.width;
helperCanvas.height = image.height;
Here is code with a test filter that just turns all non-transparent pixels red.
It also renders the filtered canvas image to an image on the page.
BTW, when creating an image object, there is a new Chrome bug that can be avoided if you create like this:
var img=document.createElement("img");
Fiddle that must be viewed in Chrome or FF (IE==CORS failure): http://jsfiddle.net/m1erickson/LeGD5/
Here is 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.createElement("canvas");
var ctx=canvas.getContext("2d");
var img=document.createElement("img");
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0,img.width,img.height);
// test -- turn every non-transparent pixel red
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data; // get pixel data
for (var i = 0; i < pixels.length; i +=4)
{
// if this pixel is not transparent,
// mask it in pure red
if(pixels[i+3]>0){
pixels[i]=255; // this is the red component of the pixel
pixels[i+1]=0; // this is the green component of the pixel
pixels[i+2]=0; // this is the blue component of the pixel
pixels[i+3]=255; // this is the alpha component of the pixel
}
}
ctx.putImageData(imgData, 0, 0);
var theImage=document.getElementById("theImage");
theImage.src=canvas.toDataURL();
}
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
}); // end $(function(){});
</script>
</head>
<body>
<img id="theImage" width=300 height=300>
</body>
</html>
you had a couple bugs in your dataURL part, but this seems to work:
var image = new Image();
image.onload = function () {
var helperCanvas = document.createElement('canvas');
var ctx = helperCanvas.getContext('2d');
ctx.width = image.width;
ctx.height = image.height;
ctx.drawImage(image, 0, 0, helperCanvas.width, helperCanvas.height);
var imageData = ctx.getImageData(0, 0, helperCanvas.width, helperCanvas.height);
filter(imageData);
ctx.putImageData(imageData, 0, 0 );
//context.drawImage(img,0,0);
data_as_source = helperCanvas.toDataURL();
var img = new Image();
img.src = data_as_source;
img.style.border="3px solid red";// for demo sake
document.body.appendChild(img); // for demo sake
}