I want to know how to manipulate pixels like what we can do within the C# code in JavaScript with Phonegap lib.
I am not sure whether it is possible. So far what I have found is nothing related to image processing in the Phonegap library.(It does provide Image, Capture helper to do something, but it's not enough.)
When I say manipulate pixels it's not about the simple methods like crop, resize, rotate etc. it should down to the level of having access of individual pixels in an image so more complicated computation can be conducted.
Thank you.
PS:
guys thank you for leaving "-1", please give your reasons at the same time. thx
Since is javascript, is done the same you would do it on a browser: using <canvas>
Here is fastCanvas, a phonegap plugin for using it. I haven't use it, but I hope is actually useful.
#chris is right. Because you're running Javacript you can use anyway JS libraries that you used on desktop.
For example, I use CamanJS (http://camanjs.com/) to apply some filters in my Phonegap App. It's easy to use and works well.
But don't forget that you are running JS on a mobile device. Mobile devices haven't the same computing power as desktops...
Related
First of all, I'm very new to javascript. I'm trying to develop a javascript function which takes an image and returns a cropped version of that image. By looking around on google I've found that I probably need to use a canvas in some way to accomplish this task. But does that mean I have to display the image on my page?
I've also looked at different javascript image processing libraries for a similar function, for example Pixastic's Crop, but I have no idea how to use it to solve my particular problem. So now I'm turning to you guys for help. Please guide me in the right direction!
Thanks!
Pixastic's Crop solution seems easy to implement and uses the canvas. It would do the job as long as you don't need to support Internet Explorer 7 or 8.
Otherwise, you can simply use CSS overflow:hidden; to do a client side cropping.
Pixastic Solution: http://www.pixastic.com/lib/docs/actions/crop/, check out the Example Code tab.
Here is a working example for Pixastic and the CSS solutions: http://jsfiddle.net/EB6P7/1/
I used the jQuery plugin for Pixastic.
--
If you don't need to save the image on the server side I recommand using the CSS solution as it doesn't rely on Javascript and achieve the same result as Pixastic.
If there's anything you don't understand, ask me as I don't know your level in HTML/CSS.
Well if your problem is only cropping and not saving the cropped image, the simplest solution I would say is to position the image using CSS inside a div and show only the cropped area.
If you want to save then I wish you need to use some library on the server side to crop and save
Maybe the CSS Clipping feature is a solution for you?
#someImage
{
clip:rect(50px 100px 130px auto);
}
I've built my mobile site using the jQuery Mobile UI but I now realize that I need some functionality to be different between it and my desktop site (datepicker dates should be longer on the desktop site, etc).
I've looked into Modernizr and matchMedia to help me load separate js files but I can't figure out a nice way for it to work responsively. Modernizr only works (unless I missed something in the doc) on the initial load and I'm having problems with matchMedia executing multiple times as it crosses the min/max-width threshold. It works sometimes but the trouble is in adding/removing the separate js files. On top of that (but not a huge issue - I don't think), Chrome fires off an error when loading scripts into the DOM from another script.
Would the best thing be to write one js file and then add a listener such as $.mobile.media("screen and (min-width: XXXpx)") to the body's width, changing my needed values?
I may be making this too hard for myself, or missing something obvious because I'm trying to keep HTTP requests and site size as small as possible, but I can't figure out a good solution for this.
Thank you!
Lightning Round Bonus Question: Is it good practice/proper to keep all of the jQuery Mobile styling (data-role data-id data-theme) after switching to the desktop site? It looks awfully .. awful for someone only viewing it on a larger screen.
IMHO, the best approach would be to introduce a couple of flags in your javascript, like "isMobile", "isTablet" or "isDesktop", that would be set within a method attached to the "pageinit" event of your webapp. Later on, you could check that flags to act accordingly with the proper version in the specific parts of your code.
The way you can check that flags depends on your architecture. In the project I am working right now, I extract that information from a class attached by the back-end on the body of the page, but that's because we have that info. You could try to use a library like Harvey to observe the media-queries that would be trigger, and set the flags accordingly. I don't think that your options ends here, but I am afraid I can't help you more!
I'm trying to dynamically make a kaleidoscope pattern from a source image.
You can see an example in Flash here: http://www.maegpai.com/mademyshirt/tool/ (click an image to start).
I want to create the same effect using either HTML Canvas, CSS (masking) or ImageMagick and PHP.
What would be the best way to create something like this besides Flash?
I'm not concerned about older browsers, if I can get this to work in Safari and Chrome that will be enough.
Here is a CSS one: http://bl.ocks.org/abernier/raw/9070122/ code can be found here: http://bl.ocks.org/abernier/9070122/
If you want it done quickly with the least amount of work on your part, use ImageMagick and PHP, the script is already written for you.
If you want to show off your mad skillz, I'd go for CSS (masking). That seems difficult to me.
If you want to get attention, go with HTML5 Canvas. Everyone thinks it's cool.
Need a webpage which displays an image for x number of seconds and then fades into another image which also contains a clickable link.
How do I achieve this with javascript? I know this can be done in Flash but it needs to be iPhone compatible.
Checkout the jQuery Cycle Plugin for a Master's Class on manipulating images with JS for galleries and such. Well written, well documented.
Many other good ones out there. Luke, Use the Source! and learn.
The best way I know is to use a library like jQuery. From what I understand iPhone supports jQuery.
I need to create a slide show of some images that can go full screen so it can be displayed via S-Video out.
The software is delivered via the web so a web-based option is needed.
The list of images is dynamic, and I would like to show them in order. The list of photos can change while the slideshow is running, and I would like to add the new photos to the slideshow.
I see two options:
Build it using JavaScript and then use a browser plugin to go full screen. I have a prototype of this, however it displays photos in random order.
Build it using Flash. I know nothing about Flash so I am looking for slideshows that can go full screen.
What would be best? Are there any good, customizable Flash slideshows?
For those interested, I ended up making an Adobe AIR application using HTML and JavaScript. Adobe AIR can go full screen and I was able to leverage the knowledge of HTML and JavaScript I already have. It has worked out pretty well, though there was a rather steep learning curve for the native AIR classes and how to use them.
If you're using Flash, SlideShowPro is a good option that you may recognize from sites like ESPN.
when you say "fullscreen", do you mean taking up ENTIRE screen? if so, javascript is not a tool to use, it must live inside the browser, so you will always have some chrome visible from the browser.
flash can do full screen, on the other hand.
Most browsers allow you to go full screen (even hiding the chrome) with the F11 key (requires user input). Then it's just a matter of scaling the image in javascript to the size of the viewport. If it doesn't exists, it could be written easily enough probably from a preexisting gallery script.
Also, this answer may be helpful
Hope that helps.