So basically I have use SVG/javascript/PHP so that when a user clicks on a PNG image it takes the coordinates and uses these to plot a small black square on the PNG image, it's really very simple.
However, I was wondering if it's possible if you have the PNG in tags within the SVG element, and the filled square on top of the PNG image (made using SVG 'rect'), to save this as 1 single PNG?
You should probably go through a simple canvas tutorial. I suggest checking the Mozilla (mdn) tutorials. Canvas isn't very hard to work with. For a quick idea of what you will need, check out this tutorial about drawing a rectange and to save the image you can access the canvasElement.toDataURL() method to get a base64 encoded string of the image on the canvas. To save to user you can location.href=dataURL; or post it to a sever using ajax.
Related
I'm making a game for a school project, and we have been tasked to create a game using the HappyFunTimes plugin for Unity. For the game my group is making, we need to generate a random sprite image in a C# script in Unity, and get the sprite to display in the upper middle of the phone's controller screen. Unfortunately, at this point in my education I'm only familiar with C# so I'm having trouble working through the HappyFunTimes's game-pad code. Any help would be appreciated.
I don't know how to generate an image in Unity. I know last time I checked there was no easy 2D API for direct rendering (as in draw a line, draw a rectangle, draw a circle, etc...)
You can render a scene to a texture though, see render texture, render to it, and then get the data out.
Or if you could just create an array and set values if it's a small image. (for example the gravatar images here on SO or a QR code).
Once you have the data you'd need to base64 encode it there should be some C# functions to do that. Then you can send it to the phone. On the phone you'd need to decode it, put it in an ImageData then you can copy it into a canvas with putImageData
You can then either display that canvas as is, OR, use it to draw into another canvas, OR, generate a dataURL for an image. All of that will have to be in JavaScript/HTML/CSS not C#
... although you could make C# send a dataURL directly and skip the decoding, imagedata, and canvas parts. Just assign the image's src property to the dataURL
I'm trying to display a 16-bit tiff image in a html5 canvas, I found this library seikichi/tiff.js and it works well but my images are dark, the pixel values are in the range [0- 300] then the image is quantized badly, the canvas displays a black image. I have tried other alternatives but I have the same problem. Is there any way to implement the quantization? Could suggest another solution or library?
PD: I get the image from a node.js server using ajax
Thanks!!
What I'm trying to do is include what is under my canvas object in the page as part of the image when I saved what is inside the canvas.
I have an application that creates a canvas and lets you draw with the mouse on it. This drawing functionality is in place so you could draw on a page as if they were notes, so after I can save the image or page with the "notes" I draw on it.
So far I'm able to save what is drown in the canvas but because the background is not part of the canvas I can't get to save it together. I tried experimenting with html2canvas.js but it doesn't work in my case because it takes the DOM object an redraw them into the canvas, it doesn't take just what is under the canvas to be part if the final image.
I would like to know if there is a way to do this, or somehow capture the pixels in that area and redraw them as part of the canvas when I'm creating it.
Thanks a lot in advance!
Possibly a duplicate, but I'll give you a very short answer; you can't (unless you do something like html2canvas, where it transposes the DOM onto a canvas element)
This is by design. If you could it would be a security flaw. Scripts are not allowed to create images out of arbitrary stuff on a person's screen. If you search for "html canvas security rules" you'll find more information on why this is disallowed.
Unfortunately, HTML2Canvas (or something like it) is the only option, but it's only part of the puzzle. To get the effect you want, you need to create another canvas to composite the output from HTML2Canvas and the drawing canvas. You'll need to offset the output of HTML2Canvas to the position of your drawing canvas, and then draw the imagedata from your drawing canvas on top of it. Then you can use the imagedata from the compositing canvas as your output.
I have an image on my canvas . the canvas is annotated with text on top of the image. I wrote the text using canvas.fillText(). How do i save this text to the google chrome cache. I can use HTML5 or js.
You have to save the text in variables as you write it on to the canvas. The canvas element does not retain the internal structure of what you've written on to it, once something is drawn it's just pixels, the only way to get it back would be to implement some sort of OCR in JavaScript.
If you want to retain the structure of the elements you're adding to a dynamic picture then use SVG instead.
I'm working on a Raphael JS project and need to display some transparent PNGs with only the parts that are non-transparent to be clickable. Is there a way to:
Upon mouse click, pull out the alpha of the current position.
or
Generate a path which can be be used to define the clickable region (i.e. http://raphaeljs.com/australia.html)
As raphael is for vector graphics, it is the wrong tool for your problem with png. I think canvas is what you looking for. Load your image in an canvas (the canvas doesent need to be pushed in the DOM). On click check the coords and get the pixel out of the canvas.
But maybe it will be easier to convert you png to vector graphics and use raphael instead.