Is there a javascript library to draw images directly in the browser and save them to png or jpeg?
I want to use an alternative to services like aviary.com, pixlr.com and sumopaint.com and dont want to rely on third-party services and apis like these ones.
Is processingjs the right solution? I want a solution that works everywhere so please no nodejs and so on.
I need tools like a brush, paintbrush, pencil, layers, filters and so on - just like the real photoshop.
You could also draw all sorts of images and animations using http://paperjs.org/
Then you can save them using straightforward JS:
var canvas = document.getElementById("my_canvas_element");
var imageToExport = canvas.toDataURL("image/jpeg");
document.write('<img src="'+img+'"/>');
Try processingjs
For image saving, just use data-urls:
http://en.wikipedia.org/wiki/Data_URI_scheme
Get image data in JavaScript?
Related
I'm trying to add a simple fixed ratio cropping functionality to the filepond input. (meaning that user will be able to drag crop rectangle and choose how to crop exactly)
After reading documentation, I got an impression that it's only possible by bringing full-fledged external image editor (Pintura, which was probably renamed from Doka).
Pintura seems to be a commercial only editor.
So do I understand correctly – there is no way to implement simple crop with filepond without using commercial Pintura editor?
If no, how could I achieve that? My understanding is that allowing user to crop image is fairly common operation and should be out of the box.
Any docs I missed?
I have an image of a living room, which I'm turning into a menu for a new site I'm working on. The idea is that you can click on certain items in the room, like a chair, desk, couch, etc and get taken to the desired page. I'm wondering if there is a clever way of doing this. Since the items are not simple shapes, I don't want to use a standard image map.
Thanks for you help!
I'm answering because a Google search brought me here...
Because you asked for a tool:
GIMP Has a really good Image map creation function.
Open your image in GIMP and select Filters > Web > ImageMap
From there you can create image maps by drawing on the image. Saving will generate HTML you can then tailor to your needs.
This tool looks to be a solid image mapper: http://www.image-maps.com/
I'd suggest doing this with a canvas and SVG's, it would make this quite a bit easier, and more professional.
As Korvin mentioned, doing this in SVG is probably the easiest option, because you can attach events to objects in SVG rather than having to manually specify a particular area in which to listen for events.
If you go this route, I recommend using the RaphaelJS library which has a nice syntax and the advantage of working in IE pre version 9. Here's a demo which, although it uses onmouseover instead of onclick, it might be close to what you're trying to achieve:
http://raphaeljs.com/australia.html
I'd like to append a border (20px white) to an image, save as a new jpeg image (orginal image with a border), I don't know how do I start. Can anyone give me a direction or code example?
Thanks
You have two ways to do it:
On your UI, wrap the image with a Border element with the correct settings and use new WriteableBitmap(borderElement, null) to create a new WriteableBitmap which you can then save using the SaveJpeg extension method.
Your other option is to use the WriteableBitmapEx class library to graphically add the graphical elements you want.
I've used both. The advantages for (1) is that there's less hassle in the sense of adding a dependeny on another DLL. The advantage in (2) is that you don't need to mess with your UI to create the image.
Basically, I want to save a certain DOM element of my page as an image, and store this on a server (and also allow the user to save the image to a local disk). I reckon the only way of doing this currently is to render a canvas, which allows me to send the image data via AJAX and also make image elements in the DOM. I found a promising library for this, however my DOM element has
multiple transparent backgrounds
css 3d tranforms
And html2canvas simply fails there. Is there currently any way to neatly save an image representation of the current state of a DOM element, with all its CSS3 glory?
Browsers may never allow a DOM element to be truly rendered as it is to a canvas, because there are very serious security concerns around being able to do that.
Your best bet is html2canvas plus your own hacks. You may simply need to implement your own render code in a customised way. Multiple backgrounds should be doable with drawImage calls, and you may be able to work in css3 transforms when canvas 2D gets setTransform() (which I think is only in the next version of the spec).
In this stage of CSS3 development and crossbrowser support is this probably not possible without writing your own html2canvas extension.
You can try dig into Google Chrome bug reporter as they allow you to send current snapshot of web page. But I think it's some internal function which isn't available in JS api.
Also, I think this can be easily abused for spying on users, so don't expect any official support from browser development teams.
Seen a good charts plugin I want to use:
http://www.jqplot.com/tests/stackedTests.php
But for my visitors, they may want to save this as an image (via right click, copy as image menu item) or alternatively a button that says save as image or something similar.
So is it possible to save the canvas in any given state as an image file?
I think toDataURL could help you :)
If you are willing to use a pre-made library, you can try using Canvas2Image.
Otherwise there are a few Canvas methods that Canvas2Image wraps around and explain in more detail in the above site, namely the toDataURL method in the Canvas object that returns the data base64 encoded in the image format that you require. It's not 100% cross-browser, I think, but it's the "right" way of getting it.