I am creating an app which uses fabricjs canvas drawing comics. Canvas contains some objects such as rectangles, svg object, and jpeg images. After editing is done, the canvas need to be stored in the server (nodejs) and should be reloaded later from server by the creator or other viewers.
I thought I can serialize canvas to svg string and store svg string on the server and upload images which exist in the canvas one by one to the server as well. Later on, load the svg string replace the images url with the downloaded picture and reload the canvas.
Here are my questions:
1- Is this the right way to achieve my goal?
2- I am doing all of this because my canvas will have different size depending on user device (monitor, smartphone,...) therefore, I chose to use svg for scalability. However, I'm not sure how to scale the original svg string to the new canvas.
Thanks,
Don't save to SVG. SVG is for export. Call myCanvas.toObject()
Not sure how you're going to take advantage of SVG's scalability, if you are just using SVG as a persistence format for canvas. But if you're going to render in SVG, then that makes sense.
You may be overthinking the image solution. How are users going to put an image on the canvas in the first place? The way I do it is to have them upload the image to my server. Then I let them choose images from an image browser. The image they choose already has a URL, so there's nothing left to do when storing/restoring.
Related
There I am creating a stamp maker in HTML,Jquery and javascript. In the editor of my application image is adding to HTML canvas (simple) and also the text, I just create new line element and then append it to the canvas.But the problem is that I want my image to be in back of text. I googled it alot and also search stackoverflow I got the solution of creating multiple canvases but in last I have to download the canvas to file for user. There is the problem. And I want to export whole canvas along with text one and second image together.If I create seperate canvas for the text and another for image and give image one low zindex it would be fine but there will be one canvas to be exported as image.
Link to multiple layers in canvas html5 - canvas element - Multiple layers
I am hopping that we would come up with an idea of how to download both canvases as an image or find a method to take image to back of the canvas.
Any answer would be appreciated.
If you store the text, second image and first image in variables, you could just draw them on the canvas in the order you prefer. This means that, whenever there's some change in the image or text, you should clean the canvas and redraw everything.
Also, you may be interested in Compositing, since it allows you to decide where a new object is drawn in relation to the existing drawing (on top, behind, etc.)
I'm currently working on a top-down MMORPG, in JavaScript. As you can imagine, this requires a lot of sprite sheets, and herein lies the problem.
I can simply place the clipped version of a sprite sheet onto the canvas using the canvas.drawImage method. However, this must require more performance than simply loading the clipped version of the image into a new image object which I'd then place onto the canvas using the canvas.drawImage method, as I'd only have to clip it once.
Is this at all possible, and if so, how?
It's a sprite. Any "clipping" is a convenient illusion. Loading a clipped version adds more HTTP traffic which will certainly take more time than drawing canvas image, regardless of the image source, especially when you have the image on the client already.
I'm new to HTML5 and JavaScript, and I'm trying to use the canvas element to create a high(ish) quality output image.
The current purpose is to allow users to all their own images (jpeg, png, svg). this works like a charm. however when I render the image it's always a 32-bit png. how can I create a higher quality picture using JavaScript(preferably) ?
when I output the file, it always seems to keep the same resolution as the canvas, how can I change this using JavaScript(preferably)
Thanks in Advance guys, I looked around for a while but I couldn't find the answer to this :(
If you want to create a larger image with getImageData or toDataURL then you have to:
Create an in-memory canvas that is larger than your normal canvas
Redraw your entire scene onto your in-memory canvas. You will probably want to call ctx.scale(theScale, theScale) on your in-memory context in order to scale your images, but this heavily depends on how they were created in the first place (images? Canvas paths?)
Call getImageData or toDataURL on the in-memory canvas and not your
normal canvas
By in-memory canvas I mean:
var inMem = document.createElement('canvas');
// The larger size
inMem.width = blah;
inMem.height = blah;
Well firstly, when you draw the image to the canvas it's not a png quite yet, it's a simple raw bitmap where the canvas API works on as you call it's methods, then it's converted to a png in order for the browser to display it, and that's what you get when you use toDataURL. When using toDataURL you're able to choose which image format you want the output to be, I think jpeg and bmp are supported along with png. (Don't think of it as a png converted to another format, cause it's not)
And I don't know what exactly do you mean by higher quality by adding more bits to a pixel, you see 32 bits are enough for all RGBA channels to have a true color 8 bits depth giving you way more colors than the human eye can see at once. I know depending on the lighting and angle in which the user is exposed to your picture his perception of the colors may vary but not the quality of it which I'd say only depends on the resolution it has. Anyway the canvas was not designed to work with those deeper colors and honestly that much color information isn't even necessary on any kind of scene you could render on the canvas, that's only relevant for high definition movies and games made by big studios, also, even if you could use deep colors on the canvas it would really depend on the support of the user's videocard and screen which I think the majority of people doesn't have.
If you wish to add information not directly concerned to the color of each pixel but maybe on potencial transformations they could have you better create your own type capable of carrying the imageData acceptable by the canvas API, keeping it's 32-bit format, and the additional information on a corresponding array.
And yes, the output image has the same resolution as the canvas do but there are a couple of ways provided for you to resize your final composition. Just do as Simon Sarris said, create an offscreen canvas which resolution is the final resolution you want your image to be, then, you can either:
Resize the raster image by calling drawImage while providing the toDataURL generated image making use of the resizing parameters
Redraw your scene there, as Simon said, which will reduce quality loss if your composition contains shapes created through the canvas API and not only image files put together
In case you know the final resolution you want it to be beforehand then just set the width and height of the canvas to it, but the CSS width and height can be set differently in order for your canvas to fit in your webpage as you wish.
Being Super new to HTML 5 Canvas, I need to be able to load an image, and then be able to draw ie "hit points" on the image and save.
Ive only just started and can do this
http://www.w3schools.com/html5/canvas_drawimage.asp
so thats fine loading the image I just now need to allow the user to click on parts of the image to create dots and then be able to save them. Any good links or examples?
Opera has a good tutorial on letting the user "paint" on the canvas: http://dev.opera.com/articles/view/html5-canvas-painting/
For the graphic editing of the dots there are IMO three main options:
load the image in a canvas and really change the canvas by drawing on it
load the image in an img and use it as a background over which there is a transparent canvas that is where you draw the dots
don't touch the image and don't use a canvas but make each dot a separate img tag that simply lives on top of the image
For sending the result you probably don't want to send over the modified image, but just the selected dot configuration and that is a normal ajax request to the server. It is also possible to send the modified image in png format (or even to "downloading" it locally on the computer without sending anything to the server), but that is IMO not an useful capability in this case.
Not exactly the same, but you can achieve that. I can give you an headstart on this - checkout this jsFiddle. I built this editor using FabricJS. The save functionality is also given in the NoteEditor.js
var canvas = new fabric.Canvas('c');
var imgInstance = new fabric.Image(imgElement);
canvas.add(imgInstance);//initialize the Canvas with the image
I have an website using SVG/VML (via Raphael JS) setup in a mapping application where the SVG is used to display graphics atop a backdrop map image. This works very well onscreen, and for printing hardcopy maps with overlays. Where this setup falls apart however is when the user wants to save the map image with the SVG overlay to a local .JPG file.
More specifically, using the standard right-click functionality of most browsers to "Save image as..." does not work when there is an SVG/VML element sitting atop the image. Right-click on the map, and the user can save the map image, but without the overlay. Right-click on the overlaid SVG element, and the best the user gets is the ability to inspect the element or save out some HTML (it varies by browser).
So my main question here is; Is it possible to take an image and an SVG element and combine them (preferably client-side, though I'm open to options) into one "flattened" image, .JPG, .PNG or otherwise, that can then be right-clicked and saved, or downloaded to a user's PC upon request?
What you need to do is, instead of overlaying JPG and SVG:
Take the original image
Draw the lines in the SVG file on it in memory
Output that single image as a JPG to the browser.
This of course means that you have to be able to interpret SVG...
One possibility would be to embed the image into the SVG, and then generate a Data URL with the combined images. The following example achieves this in png format:
var datauri = c.toDataURL('image/png');
where c is your formatted SVG layer. For more info, check out this open source editor, http://code.google.com/p/svg-edit/, in the svgcanvas.js and svg-editor.js files is a good example of how to export SVG as a png file. Its a little hard to understand at first, but very well written.
I'm afraid you're gonna have a tough time attempting to render SVG on a Canvas element just like that due to security constraints (I could not get this working in Firefox at all for instance).
Here's an idea though:
Place your image inside the SVG DOM using the svg <image> tag
Pass your SVG code through the canvg library
Use the toDataURL method of canvg to generate the image