Is it possible to dynamically create and modify images on a per pixel level in JavaScript (on client side)? Or has this to be done with server based languaged, such as PHP?
My use case is as follows:
The user opens webpage and loads locally stored image
A preview of the image is displayed
The user can modify the image with a set of sliders (pixel level operations)
In the end he can download the image to his local HDD
When searching in the web I just found posts about using IE's filtering method, but didn't find anything about image editing functions in JavaScript.
Some browsers support the canvas:
http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas
This has to be done on the server side. One thing you might look at doing is allowing all the editing to go on client side, and then in the end POST the final image (via AJAX) to the server to allow it to return it to you as the correct MIME type, and correctly packed.
You may want to check out Processing.js. John Resig of jQuery fame wrote it. It supports pixel processing, unfortunately only Firefox 3 can handle it sufficiently.
Also look at data URIs (though IE versions below 8 don't support them, unfortunately!)
You can imagine a set of JS tools that will allow the user to define what kind of transformation he wants to do, but the final work of transformation MUST be done on a server side. JS on the client side is unable to create a file, for security reason.
Try Allicorn's Image Retargetter - it sounds like that's what you're looking for.
Local image manipulation in JavaScript should be possible - have a look at Defender of the Favicon. ;-) The question is how to get the original image from the file system into your page (I don't know of any other way than doing a HTTP upload to the server first).
Related
Like the title says, I have a requirement to print a part of the browser window to PDF and then send it to the server so that it can be faxed. I have already found a faxing service so the real problem is in figuring out how to generate the pdf to begin with. I have come up with several options to do this, however all of them come with significant downsides. They are:
Use window.print() on a button click along with print media queries and have the user download the resulting PDF and re-upload it to be faxed. The problem with this is that it is a multi-step process and my users would prefer to just click a single button
Use a library like jspdf to generate the pdf, output to a byte array and upload it to the server. This will work, however it looks terrible because I lose all styling and my print media queries will not be applied. So far, this is my best option
Render the HTML server side and generate a PDF from that. This will work fine, however it requires duplicating all of the work I have done client side (this is a SPA app) along with duplicating the maintenance.
Use a rendering service or library to run the client side application in a headless browser and generate the PDF from that output. This would be very complicated from a security perspective as the application lives behind a login page.
I would appreciate any suggestions not listed above as well as any advice on how to eliminate the cons posed by these options. Thanks in advance!
Looks like using jspdf to render the PDF along with a library such as html2canvas to convert the printable region into an image to preserve styles will get the job done. It has taken some work to configure everything properly (and I'm not through yet) but I am confident this solution will be effective.
Server is solaris and it runs jboss.
Client is IE8.
Plug-in is not allowed but js library like jquery is available if it is MIT licence.
I can't say all the limitations I'm in now but almost all the technique using java and javascript is allowed.
What I wanna do is convert webpage into image file.
But print screen and using ms paint or using free soft is not allowed.
I know javascript is not allowed to save file.
But in this restricted environment, I must save the webpage that is rendered by IE8 to image file.
Is there any way to done such tricky task?
No, you can't do that with JavaScript on IE8 without any kind of plug-in. I think you might be able to do it with IE9 using canvas, but IE8 doesn't have canvas (and I'm not at all sure I'm right that you could with it, either).
What you can do is send the full HTML to the server via ajax along with the width and height of the browser window, and then use a "headless" browser library on the server to reconstruct what the page probably looked like and save that out as an image file (on the serveR). But it will be an approximation.
I'm working on an image mashup web app.
I want to avoid flash or other client hassles and just do it pure HTML+javascript.
To keep it light, I'd like to do the work on the client side in Javascript, and have it just push a final saved image to the server.
I thought after reading about the wonders of HTML5 and Canvas I'd be able to use that.
Trouble is though:
If I use the new drag and drop feature of HTML5 for the user to pass a local image to the app and then paint it to the canvas, then ... the canvas get's dirty and it throws a security exception if I try to save the image data.
If I use an API like Bing Image search to find images for the user and paint them to the canvas, then ... the canvas gets dirty and it throws a security exception if I try to save the image data.
The only work around I can think is to have the server act as a kind of proxy and have it relay every image that is worked with to the client - but that defeats the purpose of going client side.
Is there any other method I'm not thinking of, or is pure HTML5 + JS at the client side just not an option for this use case?
The security exception is thrown because you are using images from different domain (local or Bing in your case), you should give to the user the ability to upload the selected images on your server and then work with them in canvas. For images from internet storages you can make something like a proxy to show them on the frontend, images from user's pc should always be uploaded. There is no other way to avoid XSS exceptions as far as I know.
P.S. there is a good article about HTML5 canvas image restrictions here: http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules
Here's what I want to do:
Load a web page from a specific
location
Print that web page into a jpeg,
png, or other graphic file format
Upload that image to another site,
or save it to a location on my local
network
I know about window.print(), but that always seems to open up a print window, and I'd like to do as much of this operation silently as possible.
Essentially, I want to be able to take a snap shot of the web page so it can be put in a directory that is accessed by one of those electronic picture frames. They can either access a web-based service, or a directory on the local network.
Thanks in advance for your help,
Rben
Browsers will not let you print "silently", because if they did websites all over the place would use them to overload your printer with spam. There's no way around it (and if you found one, they'd close it as quickly as they could).
So, you could either a) create a browser plugin or something similar that gets you outside the broswer's "sandbox", OR, b) write a web crawler app that obtains the web page, and find some other technique to render it into an image (drive a browser programmatically perhaps).
If either of those sounds promising, let me know and I can fill in more detail on how to go about them.
You can't do that using javascript. wkhtmltopdf can help you. Here are the list of tools available to do it in this SO discussion.
I put together a script i think might be just what your looking for... Screenshot Demo.
It uses printElement and Feedback.js(Can't remember the source) and it allows you to screenshot the whole webpage and either send it as an email or to a printer.
Let me know if this helps and sorry i have no put more detail about it on the page but I am at work at the moment lol
While the subject could sound like I'm looking to do something shifty, I'm not; I maintain an internal web site used by several hundred phone operators, and would like to add the following functionality:
I would like to add a control in the header of all of the web pages that would capture an image of the entire desktop and save the image as a file to a shared network drive to assist in troubleshooting production problems. This screen capture app would be called by JavaScript.
I've researched many threads on this site pertaining to capturing screenshots, and all of the offered applications don't meet my need in one of two ways:
The screen capture application has a GUI that pops up and the user sizes some sort of capture control or interacts with a window to do the capture. The users are not very computer literate, and could not be trusted with using a "pop-up" application correctly-- and it would be impossible to enforce them to save the image file with a common file naming convention. I would like the user to press a single UI control on a web site and have JavaScript make the calls to obtain a screen shot and save the image without any further user interaction.
Some automated applications save the HTML by re-posting to the site and "re-assembles" the individual HTML elements into an image. This will not work as the input data that the operator has typed in needs to be in the image, the site uses AJAX so the visual "state" of the web page will be different from one re-obtained from a POST, and some applications have had (active directory) security issues when trying to interact with our (secured) web sites.
If there isn't an application that will meet this need, I'll just roll my own control in C#. But I'd rather obtain a third-party control. so I don't have to support my own control for life. :-)
Javascript does not provide access to the local system for this functionality due to the security risk.
I believe the only way of doing this on a web page is possibly via an active X control or Java applet (similar to screencast-o-matic) but even then security may be an issue.
I also image unless your own c# control is in a windows forms application it would not work as c# controls that are part of a web site will be run on the server and not the client.
Hope this is of some help.
Well to do that you'll need something to interact with the desktop which can't be done by javascript alone.
You'll need to have an Active X Object to be able to interact with the client's machine. Once you have that, it is easy to just have the object take a picture and save it to the directory.
I believe I have the C# code to take a screen shot. If you want I'll post it.
Some alternatives to ActiveX / Java:
You can create a flash program to do the screen capture. I haven't done this and don't know the details, but I'm fairly sure it can be done.
You can setup a custom protocol for screen capture (eg. screencapture:// ), and in your header include a
Screen Capture
link. You'll need to find a gui-less screen capture program to do the actual capturing and set it up as the handler for that custom protocol.
Did it once. I couldn't find a direct way so did it rendering HTML to canvas, then canvas to image using html2canvas. Canvas to image is a much more common theme so you'll find many tutorials about.
HTML to Canvas
Canvas to image
NOTE: rendering from HTML to canvas may leave some elements behind, like SVG. But overall it did as much as expected.
PSR (problem step recorder) is a great tool for debugging purposes on client machines and it is available on all windows machines by default.
Try below and see if it works for you.
Go to Start->Run and type psr.exe (or just psr) this should open the recorder. This is fairly easy to use, so even users/clients can use it. If it works then try below steps to setup.
Step 1: Register PSR protocol. This tells the browser what to do when a link on the page is referring to PSR protocol (which we will use to open this recorder).
- Create registry values as below
HKEY_CLASSES_ROOT/
PSR/
(Default) "URL:PSR Protocol"
URL Protocol ""
shell/
open/
command/
(Default) psr.exe
If you are not comfortable with creating registry values, download and double click this file.
Use this link for more information.
Step 2: Now create an example html file to test launching PSR.
Save the below code to index.html file and open it.
<html>
<head>
<head>
</head>
<body>
Start Recording
</body>
</head>
</html>
Or download this file and open it.
This should open your PSR. It is easy to use and can record all the information you need for debugging.