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.
Related
I am using createjs library, and my game has a large bitmap on the background, in order to fill a window in full HD resolution. In lower resolutions i use a pan and scan like method. But the action is always limited in a smaller area of the canvas.
So i would like to know if it is possible, and how, to gain performance by caching static areas, or using any other technique.
For the sake of the argument here is a graph that demonstrates my situation :
I 've already tried to put the background image behind the canvas element using CSS here :
How to center a canvas on top of a background image
But CSS is driving me insane...so please bear with me...
:)
Thank you in advance!
In EaselJS every DisplayObject has a cache method, which is exactly doing what you want - it takes the painted stuff and puts in on a off-screen Canvas: http://www.createjs.com/docs/easeljs/classes/DisplayObject.html
Afterwards it takes the image-data from the off-canvas for every repaint (basically it's just a drawImage call afterwards).
Try to only cache painted areas - if you cache empty areas, you will lose performance. However if your background is just a static image you should still keep it as a normal DOM/CSS background - there isn't any performance benefit from caching a bitmap.
I had the same idea once, and I think what you are asking for is getImageData() and putImageDate()
image = context.getImageData(x,y,width,height);
context.putImageData(image,x,y);
However, I still found the performance of this to be very poor (sorry, I can't provide any actual numbers any more), and the best and also most popular way to achieve better performance seems to be to make a second canvas just for the background, or, if you really just have a static background image, use pure CSS like you originally wanted.
context.drawImage() can also draw from another canvas element, maybe you can utilise this in some way and create inivisible "canvas caches". But I still think that it's easier to learn CSS than implement something like this.
I am not familear with createjs, but you can try to draw / clear only on active area. This way you will not redraw inactive areas with each frame.
if inactive areas are not completely static, you can use separate canvas elements for them, and draw those on the main canvas once something have changed on that area (inactive area). I ho
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
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.
I am working on a plan to build an online image editor with just some basic functions. It should (obviously) contain a canvas working area and support the following functions:
1. Upload an image from your computer or submit a link
2. Resize image (by dragging the corner)
3. Rotate and flip
4. Drag / move / pan
5. Layering (if more then one image is on the canvas, select vertical order)
6. And very important: it should be able to do some sort of background deletion using simple edge detection.
Images I am using are going to be mostly of fashion items so I want to be able to take off the background if its not white. For example automatically make this gray background, white:
Click for image - T-Shirt Black BG
I guess my best starting point is to grab some open source image editor and just use the parts of the code I need. My question is what will be better for me: Flash / Flex, or Javascript based editor. Each have some very nice implementations online, like Sumopaint, Aviary, and obviously Photoshop.net for Flash and some other good ones for JS.
Should I use Flash or go with a Javascript based solution? My gut feeling is towards JS with HTML5 coming around the corner.
Also if you recommend Javascript, can you please include your preferred framework for something like this??
Thanks!
Ajax version would have to use something on the server processing the images, like the GD Library or ImageMagick. With flash you/flex you could do the image processing on the client side, and with Flash Player 10 you can take advantage of Pixel Bender for image processing. I guess it depends on the size of your images. I would be interesting to see a benchmark on some big images, flash vs ajax/php.
Good question.
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.