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.
Related
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.
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?
I added image to canvas element, but visitor than can save that image to local comp.
Is there any way to disable that option? I don't know, putting some transparent image over?
Thx
So i thought this can help you just disable rightclicks:
$('#canvas').bind("contextmenu",function(e){
return false;
});
None of this (not even image slicing) stops a user from simply copying the screen on to the clipboard and pasting it into MSpaint or any other image utility, and saving the result. Its trivial to do; And a transparency image is no impediment to this.
The only effective options that I know of are (as was said), watermarking or low quality.
*Avoid 1 pixel wide lines or dot watermarks that can be removed easily with a Photoshop filter.
~If its commercial... You could have a pay-wall, and steganographically embed the purchaser's name and or information into the image (or preview), such that if it does get used without permission, at least you know who did it.
Basicly: if your image is loaded by the Browser you can never protect the user to download it, because if the browser knows where to find the image, the user can find this out as well. So all this download protection only works for users not familiar with computers and the internet and nowadays i think most people are able to download such an image if they really want to.
If you want to prevent users to use your images for their work, you can use images with watermarks or in a lower resolution otherwise can you tell what reason do you have to prevent users from downloading?
I found this question in review of an HTML5 captcha alternative I'm developing. My goal is not to "prevent" users from downloading the image as much as blocking OCR on the image capture. To prevent it, I added a onclick event to the canvas object that resets the canvas element on click. The user can "download" it, but it no longer is the original code presented.
I am building an Eclipse RCP application, based on eclipse 3.5.
I'd like to modify an image at runtime. The image is loaded and will be used as an icon, but depending on the situation, I'd like to add a filter on the image to give it a red or orange color, depending on some user-configured value.
It's the image transformation that I'm interested in. I already know how to get the image and ask a component to display it.
Has anybody done that? Thanks for your help :)
There are possibly many choices for doing just that, you can use ImageIO to load an image as BufferedImage and then get the Graphics2D and modify it as you wish. When you are finished modifying you can reaasign the newly created image back into your component which holds the original image and thats it.
You can of course look for some libraries to allow you easier image manipulation, maybe jmagick or something similar.
You can use DecoratingLabelProvider with a suitable ILabelDecorator. See also FAQ What is a label decorator?