I have been using drawImage to cause some video to explode as taught in this tutorial:
http://www.craftymind.com/factory/html5video/CanvasVideo.html
I would like to also be able to manipulate other objects using drawImage. The thing is when I try this on anything other than an image/video (an Iframe for example), I get a type error.
Is there some way around this?
Is there a way to get the "pixels" of an arbitrary control on my html5 page?
Simply put, you can't. Canvas is a pixel manipulated sandbox. Other elements on a webpage are rather like vector graphics, you can only manipulate their certain attributes like: width, height, color, position, etc.
But this is considered a good thing. Imagine how much extra work it would mean to render a single page, if everything could be manipulated pixel-by-pixel. Also consider that hardware acceleration is a rather new area, and that websites should run on devices with different computational capabilities.
Even though the hypertext web has gone a long way to become an interactive application platform, yet the technological boundaries are still limiting some areas of competition with visual/performance features of a native app.
Related
I am trying to create a water ripple effect in a video embedded in HTML5 default web player.
I am doing it fine with using images and and a overlay canvas on top of it, but what I am trying to do now is to get single frames from a video and output it to a canvas every 1-5ms using this tutorial.
And I am stuck at this point, I can output frame into another canvas using
canvas.toDataURL() function.
I have seen advanced web-based video players that allow for applying Processing.js sketches on top of videos, would that be a good solution?
My question is: what would be the best and most reliable solution for applying visual effects (water ripples in this case) using JavaScript to a video playing in HTML5 media player.
My question is: what would be the best and most reliable solution for applying visual effects (water ripples in this case) using JavaScript to a video playing in HTML5 media player.
In my opinion the best approach would be to use WebGL to create the effects, using the video as input texture and a simple flat geometry that is manipulated using a animated bump-map - or - directly manipulating the vertices - or - a perhaps a shader program, and then output the result to a canvas.
I would not place the video in DOM at all but create control buttons and display those together with the output [webgl-]canvas in DOM.
The obvious drawback would be besides from slightly more complex code, when used on computers which doesn't have a GPU (but that would be a drawback in any case and more so if you used a regular 2D canvas and pixel manipulation).
This is of course very broad in terms of code example. But I assume you get the general idea.
A couple of notes:
[...] what I am trying to do now is to get single frames from a video and output it to a canvas every 1-5ms [...]
This is sort of pointless in regards to the time-budget, as the typical monitor can only refresh the image every ~16.7ms which means you're wasting at least 3-4 frames that are never displayed.
Also, a typical video source never runs faster than 30 FPS (in the US, 25 FPS in Europe) which means there is only a new frame every 33.3ms (there are of course special case videos such as VR/AR, stereoscopic, games and "Mac" recorded video etc. that may use higher fps - but for the most part anything > 30 fps is usually wasted cycles) which allows for a higher time-budget for processing per frame.
I can output frame into another canvas using canvas.toDataURL() function [...]
Outch! :) This comes which a huge overhead. The browser would have to use line filtering (in case of PNG - well, some browsers skip this and use filter 0), compression, base-64 encoding, then apply the source to an image element, decode the base-64, decompress, defilter...
You can instead simply use the source canvas for drawImage() directly and only have to deal with a in-memory bitmap (super fast!).
All that being said: if simplicity is important code-wise, you can of course do all this using a 2D canvas. You can use drawImage() to displace pixels/blocks and therefor work on the GPU (but not necessarily faster than working on the bitmap directly depending on how you apply the actual displacement).
But there are still many caveats such as video source and destination resolution which has a exponential impact on performance, limited use of the GPU as you still would have to do multiple serial operations versus parallel operations with webgl/gpu and so forth. In essence, the performance will suffer compared to a webgl solution.
If you want to get high performance you can use WebGL. Following is a github reop for Water ripple project.
https://github.com/sirxemic/jquery.ripples/
Following is a ruining example for jQuery WebGL Ripples
http://sirxemic.github.io/jquery.ripples/
Think this might help
You can do it in several ways. You can write core javascript code with canvas.
But I think it is best to use Jquery plugins. There are several plugins available for water ripple.
You may check the following links:
https://github.com/virtyaluk/paper-ripple
https://github.com/sirxemic/jquery.ripples
https://github.com/andyvr/water-ripple
I'm trying to understand what people use canvas for?
I see it on job postings I read about it in Definitive JavaScript, but I don't quite get what it is used for.
I understand that you can draw 2d or 3d ( usually 2d ) objects but why no just use Gimp or Photoshop and upload the image.
Is it so you can create dynamic images based on say...user-specific data?
What is a practical example or perhaps a link to a professional implementation of canvas ( Definite JavaScript show basis stuff like drawing circles ).
MDN Tutorial
I have used a canvas to draw a graph, and it falls back to requesting a PHP-generated image if the browser doesn't support <canvas>. It's always a good idea to delegate processing from the server to the client, as this places less load on the server. In other words, instead of the server going "here's the stuff", it's more like "here's the data and the instructions to show it".
Another use I've seen is to highlight areas of an imagemap when moused over.
<canvas> is central in HTML5 game development, since it is used to draw the entire game viewport. Without it, there is no game.
Is it so you can create dynamic images based on say...user-specific data?
Yes
We used <canvas> to build interactive design editor for apparel in our e-commerce store — http://printio.ru/tees/new
The kind of interactivity we provide was only possible with Flash until recently.
Even on back end, we use Node.js and <canvas>-based image processing+generation to take data from online editor and create designs that are later used in store. These canvas-generated designs are eventually printed out on tshirts, mugs, caps, bags, and so on.
I think that's a pretty practical example :)
This is all done via Fabric.js canvas library (developed by us as well).
<canvas> is used for better Performance. <canvas> is much more faster and dynamic than jpeg or anything else. Example: http://www.profistart.com/internetseiten.html here was <canvas> used for Background.
I am creating a website where a user is able to upload an image and then rotate or move it around on a background. The final position of the image is then recorded in some way (bitmap?) and sent with some form results.
I'm a bit lost as to how to do this, the website is built using asp.net, I presume what I am trying to do could be done in Silverlight, javascript, flash, flex or maybe html5?
If anyone knows the best way of doing this or can link to a resource or tutorial I would be grateful. I would prefer not to do it in flash or flex as I am unfamiliar with them and do not have the tools installed to edit them. I would prefer Silverlight or javascript solution.
Thanks,
nl
I'd recommend doing this in javascript. At a high level, you just need an element on the page to contain your image, some basic code to allow the user to drag the container around (much of this is available prebuilt through frameworks like mootools), and some logic to save the final element position after the user is done positioning it.
I'm not sure what you mean by saving it as a bitmap, but I'd recommend just saving the element's x and y offset coordinates from the top-left corner of its container. Again, there are readily available frameworks that will do pretty much all of the positioning computations for you.
Here is an example site that implements draggable images with persistent state between sessions: http://webcomix.no-ip.org
You can do this with html5.
Have a look at canvas tag along with this javascript.
where logo is the image, context is the canvas tag context.
context.clearRect(0, 0, width, height);
context.setTransform(_m11, _m12, _m21, _m22, _dx, _dy);
context.drawImage(logo, 0, 0);
Have a look at this example - http://jsfiddle.net/prowla/Kj3UL/ best viewed in Chrome to use the new Range input types, if in FF or IE, change values in text boxes to manipulate the image.
You could save the 6 parameters of the setTransform function to save the state of the image manipulation.
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.
Are there any advanced solutions for capturing a hand drawing (from a tablet, touch screen or iPad like device) on a web site in JavaScript, and storing it on server side?
Essentially, this would be a simple mouse drawing canvas with the specialty that its resolution (i.e. the number of mouse movements it catches per second) needs to be very high, otherwise round lines in the drawing will become "polygonal" when moving the pen / mouse fast:
(if this weren't the case, the inputDraw solution suggested by #Gregory would be 100% perfect.)
It would also have to have a high level of graphical quality, i.e. antialias the penstroke. Nothing fancy here but a MS Paint style, 1x1 Pixel stroke won't cut it.
I find this a very interesting thing in general, seeing as Tablet PCs are becoming at least a bit more common. (Not that they get the attention I feel they deserve).
Any suggestions are highly appreciated. I would prefer an Open Source solution, but I am also open to proprietary solutions like ActiveX controls or Java Applets.
FF4, Chrome support is a must; Opera, IE8/9 support is desired.
Please note that most "canvas" libraries around, and most answers to other questions similar to mine, refer to programmatically drawing onto a canvas. This is not what I am looking for. I am looking for something that records the actual pen or mouse movements of the user drawing on a certain area.
Starting a bounty out of curiosity whether anything has changed during the time since this question was asked.
I doubt you'll get anything higher resolution than the "onmousemove" event gives you, without writing an efficient assembler program on some embedded system custom built for the purpose. You run inside an OS, you play by the OS's rules, which means you're limited by the frequency of the timeslices an OS will give you. (usually about 100 per second, fluxuating depending on load) I've not used a tablet that can overcome the "polygon" problem, and I've used some high end tablets. Photoshop overcomes the problem with cubic interpolation.
That is, unless, you have a very special tablet that will capture many movement events and queue them up to some internal buffer, and send a whole packet of coordinates at a time when it dispatches data to the OS. I've looked at tablet api's though, and they only give one set of coordinates at a time, so if this is going to happen, you'll need custom hardware, and a custom driver, and custom apis that can handle packets of multiple coordinates.
Or you could just use a damned canvas tag, the onmousemove event, event.pageX|pageY some cubic interpolation, the "toDataURI" api of canvas, post the result to your php script, and then just say you did all that other fancy stuff.
onmousemove, in my tests, will give you one event per pixel of movement, limited only by the speed of the event loop in the browser. You'll get sparse data points (polygons) with fast movement and that's as good as it gets without a huge research grant and a hardware designer. Deal.
there are some applets for this in the oekaki world: Shi painter, Chibipaint or PaintBBS. Here you have php classes for integration.
Drawings produced by these applets can have quite good quality. If you register in oekakicentral.com you can see all the galleries and some drawings have an animation link that shows how was it drawn (it depends on the applet), so you can compare the possibilities of the applets. Some of them are open source.
Edit: See also this made in HTML 5.
Have a look at <InputDraw/>: a flash component that turns freehand drawing into SVG. Then you could send back the generated SVG to your server.
It's free for non commercial use. According to their site, commercial use price is 29€. It's not open source though.
IMHO it's worth a look.
Alternatively, you implement something based on svg-edit which is open source and uses jQuery (demo). If requires the Google Frame Plugin for IE6+ support though.
EDIT: I just found the svg-freehand-signature project (demo) that captures your handwritten signature and sends it to a server as a SVG using POST. It's distributed as a straight-forward and self-contained zip (works out of the box with Safari and Firefox, you may want to combine it with svgweb that brings SVG support to Internet Explorer).
EDIT: I successfully combined Cesar Oliveira's canvaslol (just look at the source of the page to see how it works) with ExplorerCanvas to have something on IE. You can also have a look at Anne van Kesteren's Paintr experiment.
markup.io is doing that with an algorithm applied after the mouseup.
I asked a similar question recently, and got interesting but not satisfying answers: Is there any way to accelerate the mousemove event?