I am trying out a sample code that converts a color image to grey scale on a canvas in WebOS (enyo). When I use the ctx.getImageData method to read the pixels, the imageData contains only zeros. The sample I am using is provided in the link below:
http://chopapp.com/#x8t2ymad
Does WebOS support reading pixel data from canvas? Am I doing something wrong here?
I have refered to the following link for the logic and the code:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-transition-an-image-from-bw-to-color-with-canvas/
This works fine.
you should move the getimagedata in the callback from the onload event of the image.
something like:
draw: function(image) {
this.ctx.drawImage(event.target, 0, 0);
this.greyImage();
},
and set the source after binding the event
image.onload = enyo.bind(this, "draw");
image.src = "images/image.png";
to avoid a racing condition
now the imagedata is retrieved before the actual pixels are loaded. Which results in an empty array.
Related
My image sprite (game.player_booba) doesn't appear and I do not understand why. In spite of the modification of its position in x and in y it does not appear.
game.player_booba.init();
game.player_booba.sprite.image.addEventListener("load", (event) => {
window.requestAnimationFrame(game.loop);
});
My codePen:
https://codepen.io/manonragnotti/pen/abbeEKO
Thanks
To be honest I do not see how this question is even related to PIXI. You've included it to your codePen project but you never actually used the library. All the rendering is done directly using the native 2d canvas api. And the reason why the character sprite is not drawn on the screen is because is drawn on a canvas, which is never added to the DOM. See on this line
buffer = document.createElement("canvas").getContext("2d");
you are creating a canvas element and then assign its 2d context to the variable "buffer", but the DOM element is never actually added to the document. So you need to do something like this:
bufferCanvas = document.createElement("canvas");
buffer = bufferCanvas.getContext("2d");
window.document.body.appendChild(bufferCanvas);
I'm two days into js,html and css programming. So very newbie!
Following and building upon this TUTORIAL
Q1: How can I add this male into the background (see figuere 1.) and prohibit any strokes outside of the borders?
Adding image to background was no biggy!
function make_base()
{
base_image = new Image();
base_image.src = 'img/bmapFront.gif';
base_image.onload = function(){
context.drawImage(base_image, 0,0);
}
}
There is a context.clip function, not sure if I can use pixel form as clipping path. Making tons of "image substractions" isn't the best way.
Any suggestions
Edit:
Did the Job for me: VeryHelpful
var frontPath = new Path2D ("M 133.41,17.00 C 141.37,2.41 160.66, !VERY LONG! ")
context.clip(frontPath);
Messy strokes!
He should look like this. Then I want to save him.
Although there is such a thing as ctx.clip(), this is sometimes not what's wanted as it's impractical to use a path.
The solution that I like involves creating a virtual empty canvas onto which you draw your pixel image. Through various manipulations, like using ctx.getImageData and similar to make sure you only get one kind of color or apply other filters only once, you can obtain an image that seems to be empty (alpha of 0, mostly) in the places where you want to clip other images or paths out.
At that point, you'd use ctx.globalCompositeOperation = 'source-atop', or pick another one you might want to use from mdn's list of globalCompositeOperations.
At this point, you can just draw this virtual canvas image onto the main canvas
If you click Run code snippet in this link, it shows a cool usage of <canvas> where you can "cut-out" part of the image (just drag your mouse on the image to "cut"). I'm just curious if there is any way to save the resulting "cut-out" part of the image, as a transparent PNG (i.e. everything that is white in the canvas would be transparent).
If anyone can point me in the right direction (or tell me it's not doable), I'd appreciate it.
Yes, there is a way. Use canvas context.getImageData to get image raw data-array. Do with it(raw data) what you need(make transparent any pixel you need), and then use context.putImageData to render data on canvas. Then use var data = canvas.toDataURL("image/png") to get image data. And then you can do so: image.src = data;
Use this link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData for more info
Here's a quick tour showing how to crop & save a user-dragged cutout of an image:
Draw the image on the canvas.
Listen to mouse events and let the user define the region they want to cut out by continuously connecting new lines to the current mouse position.
Save every mouse point from #2 in an array.
When the user has finished defining their cutout region:
Clear the canvas.
Draw and fill the cutout area using the saved points in the arry.
Set context.globalCompositeOperation='source-in'. This mode will cause any new drawings to appear only where the newly drawn pixels and the existing pixels overlap and every thing else is made transparent. In common terms: New pixels will be "clipped" into the user defined cutout and new pixels will not appear outside the cutout.
Redraw the image.
The result is the second drawing of the image will appear only inside the user defined cutout. Everything else will be transparent.
Finally, you can use var url=canvasElement.toDataURL to save the cropped canvas image into a .png dataURL. If you then want an actual image from this dataURL you can var img=new Image() and set the img.src=url.
I am using fabric Js on canvas where:
I am developing a product page for an e-commerce website where
I have drawn a background image and created a polygon on it and then inside of the polygon I have uploaded images, that works fine.
But now I have to make an image crop function inside the polygon for each image so that when I click on it I can crop it.
I have used canvas context.drawImage();. Function which works fine but when I click on the image or anywhere else on the canvas it disappears and I can't select it.
Can any one please help me with it ?
The code follows as
var image = new Image();
image.src = "uploads/cat.jpg";
image.onload = function(){
context.drawImage(image, 0, 19, 69, 97, 300, 100, 103, 145);
context.Image.selectable = true;
}
I could be missing something here without seeing more context but I think if you used fabric.Image feature to draw your image instead of context.draw image it might work? Seems like there might be an issue happening with mixing fabric functions and regular canvas drawing. image.Fabric
Sorry if I misunderstood! I'm a little fuzzy on the description of your image/shape stack order, screenshot might help if this answer doesn't apply.
I have applied a CSS filter to a canvas like so:
canvas.style.webkitFilter = 'hue-rotate(90deg)';
If I then try to download the content of the canvas using the download attribute of an anchor element:
var imgData = canvas.toDataURL('image/*');
link.download = 'Image';
link.href = imgData;
the downloaded image does not have the applied filter. Even if I use getImageData to just view the image data or try setting the source of an image to the image data the same problem occurs. Is there anyway in JavaScript to get the image data of a canvas with a CSS filter applied?
You can apply Hue-shift in canvas itself.
For example, the CamanJS library has some nice image filters: http://camanjs.com/
This is from their docs:
Hue
Adjusts the hue of the image. It can be used to shift the colors in an
image in a uniform fashion. The Range is 0 to 100.
Sometimes, Hue is expressed in the range of 0 to 360. If that's the
terminology you're used to, think of 0 to 100 representing the
percentage of Hue shift in the 0 to 360 range.
Example code from CamanJS:
Caman("#image", function () {
this.hue(90).render();
});