Blueimp plugin with angular : preview image on the web page - javascript

I have a feature that allows my client to design his own personal portal, I would like to allow my user to preview a picture from his computer prior to uploading it to the server.
is it possible?.
No docs, and no result on Google, if anyone wonders why am I asking such an allegedly stupid question.
IMPORTANT: I am using this library since it has support for some deprecated browsers such as IE 8-9, hence I need a solution that can work without file API, or a good reliable file API fallback for old IE versions.

Related

Kinect (One) in the browser, the end of NPAPI

Since I read Google's message that NPAPI will no longer be supported by the end of 2014, I've been looking for an alternative. The issue is that we currently use a custom made Kinect Browserplugin which we use to control the browser with JS and control Unity Web Player games with your body.
Without NPAPI support it simply won't work anymore and our work will be lost. Google gives NaCl as an alternative but this doesn't support interaction with hardware.
The main question I have is: How to use the Kinect in a webbased platform and crossbrowser?
Currently we have the "normal" Kinect and the Kinect One from the closed beta working in the browser and Unity Web Player.
Please share your thoughts on a solution.
I apologize in advance for just spewing out links without actually supplying much information, but as far as I know there are no known good alternatives.
If I was in your position, I would have a look at the chrome.usb API or possibly, depending on your use case, node-kinect.
Here's a good general resource/discussion of NPAPI alternatives: Browser Plugins in a post NPAPI world
Probably your best approach at this point is to continue using NPAPI except in Chrome, and in Chrome use native messaging. Of course, Chrome has made it as difficult as they can to install the host that you'll be connecting to, so it'll be a pain and you'll have to install the extension and the host seperately, but there you go.

Internet Explorer modernizer

I was wondering if any of you know some libraries that will help/improve the response of IE >= 7 for a website that I have to modify.
I already loaded the modernizr library, but I know that there are some libraries ment to help IE behave as a modern browser should. So, what do you recommend? What options do I have?
I'm really sick of spending hours trying to fix a 1 thing for X Version of IE.
I don't think it's that simple. I don't know of a single library that makes them all act "normal". A few I use are:
Modernizr can help with new html5 elements in older browsers
jQuery for cross browser DOM manipulation
jQuery UI for cross browser theming
But there is no silver bullet library that works everywhere all the time. Sometimes you will have to adjust the UI based on the browser capabilities. One common method of doing so is called progressive enhancement.
Progressive enhancement is a strategy for web design that emphasizes
accessibility, semantic HTML markup, and external stylesheet and
scripting technologies. Progressive enhancement uses web technologies
in a layered fashion that allows everyone to access the basic content
and functionality of a web page, using any browser or Internet
connection, while also providing an enhanced version of the page to
those with more advanced browser software or better bandwidth.
Check out ie7.js http://code.google.com/p/ie7-js/ its not perfect, but it can help with some issues.
You can tell users they need to install Google Chrome Frame https://developers.google.com/chrome/chrome-frame/
"Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer"
I use CSS3Pie. This is a .htc file you place on the server which provides poly-fills for many CSS3 styling elements such as border-radius, text shadows, box shadows and gradients. It's quite handy in that is solves many of the same problems for IE8 and IE9 as well.
It can a be a little tricky to set up in that you sometimes need to define a MIME type on your server for .htc and you have to ensure that you set the path in your CSS file to where the .htc file resides, other than that, it's great.
I don't think there's a general fix-all solution for your problem.
I recommend trying this tool called dynaTrace AJAX Edition (http://www.compuware.com/application-performance-management/ajax-performance-testing.html), the free version is more than enough to help you.
What you do is:
Start a session and choose your IE browser
Open and click through your web application
Close the browser
Double-click the "Timeline" on dynaTrace.
You'll see a breakdown of your site's performance so you can identify which Javascript is the problem.
You'll also see if the slowdown is simply because your loading external resources which are unavailable - something which I've found IE to handle poorly.

Understanding Runtimes in plupload

I understand that PlUpload supports several runtimes (html5, html4, gears, flash, etc).
But most browsers now a days support flash. And most other file uploaders (namely: uploadify, fancy upload, to name afew) would function via a combination of javascript and flash. And the same file uploaders only support ONE runtime, which is flash. Please correct me if I am wrong here.
Even if the flash player plugin is not installed. A developer can easily integrate flash detection tools and redirect users to a download link. Which is most common for several sites.
Which brings me to the question. Why the need to include any other runtime in pluploader, when flash is enough?
Flash is not always an option. I have users in corporate environments who cannot install software on their machines and are stuck in older browser versions. Plupload allows me to add functionality to my site for most users without sacrificing users who cannot install Flash.
Why we have other runtimes in Plupload is the fact that Flash upload is very buggy. For example it can't chunk files and retain proper progress, it doesn't send cookie/session information by default and it has various problems with SSL. Silverlight on the other hands can load part of a file and send it without any problems with missing progress or cookies. So we tend to recommend having that as a fallback before flash to get better results however the install base for Silverlight is far less than Flash.

How to save an image with JavaScript?

I'm working on a Chrome Extension: when you drag an image, it will be saved to your computer.
I learned that in HTML5 there is FileWriter API, but really can't find any example of it, and does Chrome support it?
No, there isn't a FileWriter API in HTML5. What you probably mean is the File API that allows you to read files. And in Chrome even extensions aren't allowed to write files, for reasons of security. So unless you want to bundle an NPAPI plugin with your extension (which would trigger a huge warning upon installation) all you can do is trigger a download message that the user might choose to accept - or not. See Cross-browser Save As .txt for a possible approach (Flash objects like Downloadify being the other).
Edit: I was wrong, there is a FileWriter API proposal. It is very far from being done however.
I found this. http://www.html5rocks.com/en/tutorials/file/filesystem/
You can find some examples.
Edit This is screenshot from the article. I'm using chrome 12.0
FileWriter API browser support message http://s3.amazonaws.com/twitpic/photos/full/329503613.png?AWSAccessKeyId=AKIAJF3XCCKACR3QDMOA&Expires=1308932374&Signature=DXBdFSjbNqaeJPr%2F0fSAqPWyh2E%3D
I don't think the FileWriter API will be ready and usable for some time yet.
You could get the image data in hex, then use a DataURI to 'export' it from the browser. Although this leads to a file saved with a filename such as "download(1)". Each browser seems to have different size limitations for DataURIs, and they're not big, although ahould be fine for a reasonably sized image.
http://en.wikipedia.org/wiki/Data_URI_scheme
Alternatively you could use a Downloadify to save it with a proper filename (Requires flash and may be tricky to embed into the chrome extension).
http://davidwalsh.name/downloadify

Doing image processing in the browser using GWT

I want to write a simple web application in which image synthesis is done in the browser. I will have a server that serves procedural image information (expressions), and the clients should be able to use these messages to generate and display images. Can this sort of task be done entirely in the web browser (using GWT, preferably)?
You will have some major browser restrictions, but you can try using either HTML5 canvas or I have also noticed that the Firefox implementation of ImageResource compiles to a url containing data: followed by some sort of bitmap, so you could support non-html5 versions of FF. However I believe IE will be out of the question until IE9. I believe the thin image editing client used in Picassa web albums uses server-side rendering. Also, eventually you might want to look into the Chrome native API if you are doing any heavy image processing.

Categories