I am interested in building a new functionality in which the user can print what he sees in the page (as screenshot). But first he has to customize the position of some elements (images).
I am trying to find a way to do this and I was thinking of html5 canvas. I have little experience on this and I wonder if what I am thinking is at all possible.
My idea is to take a screenshot of the corresponding element (in this case is a div element with a map). I save this screenshot in a canvas and on top of it I place some other images (legend of the map) which are movable. The user can drag and drop them on the canvas.
Do all these make sense? Can it be implemented or is science fiction?
Related
Is there any way to prevent Firefox from rendering a ghost image that is way smaller than the source element when dragging large elements?
I've created a sample page and video, if you do not understand what I'm talking about.
This downsized ghost-image is problematic in applications where the user is dragging a large element to an absolute position; when the user tries to drop the dragged element to an exact location, it doesn't drop where they're trying to drop it. Only after several blind attempts, can they place the dragged element exactly where they want it.
In Chromium 69, the element drops exactly where the user tries to drop it, because the ghost image is exactly the same size as the source element.
If you can think of additional reasons against this default behavior in Firefox, please voice them at the bug I've submitted here.
In the meantime, I'm looking for a work-around.
The ghost image is ideal, because it looks exactly like what's being dragged. I know its possible to have custom drag-images, but I can't think of a way to make that custom image look exactly like the element being dragged (like the ghost image achieves).
I may have to settle for just making a generic image that can at least be sized correctly during drag and drop. Any other ideas?
I'm trying to build my first ever Chrome extension, and want it to take screenshots. I know Chrome has a captureVisibleTab API to get the visible area of the screen. I have gotten that to work. But, I want to be able to take partial screenshots (eg. user clicks and drags the mouse on the screen to select a certain rectangular area of content). How would this work on Chrome? I don't see an API for this, but I know Awesome Screenshot and some other screenshot extensions do this.
I am using .mouseup and .mousedown to detect mouse clicks and event.pageX and event.pageY to get coordinates on the page. But, how do I get a rectangle to show up on the page? I have to convert the webpage to a canvas, but I'm not quite sure how to do that. Also, once I get the selected area, how do I convert that to an image and get the dataURI like the return value that the chrome API gives?
Should I be doing this some other way instead? Thanks for your help!
I would suggest first generating the overall screenshot (example for others), then cropping it later based off of the user data you collected. You can crop the image using JavaScript and the HTML5 <canvas> element. (example code)
As for converting the webpage to a <canvas> element, take an initial screenshot, display it on the canvas using the drawImage() function.
Then, you could use either the method shown in the "example code", or a library such as cropper to draw the rectangle on screen for the UI.
The example code can also show you how to turn the selected area into a dataURI.
I'm trying to write something that draws on an image. I have a flow chart that's in a .png and I want to draw a circle around a specific step in the chart based on the page that the user is on. I would normally just head for HTML5 and use the <canvas> element, but it has to work on IE8, which doesn't support <canvas>. I can use jQuery, but that's the only external library that I can use. Also, the user can scroll up and down the page, so things that I've seen that use absolute positioning end up looking bad since I don't always want the image there. Any tips? Thanks.
How about a DIV containing the flowchart as a background image with another image (which would be a transparent circle outline image) sitting inside the DIV, positioned absolutely (relative to it's parent DIV) which is moved to the correct position within the div based on which page the user is on. Should be simple enough to do.
I need to make a interactive image gallery (or image slider) where some hotspots need be placed on. It has to be possible to click on those hotspots, to update a sidebar with the corresponding info. Some basic animation must also be possible on a slide or scene of the gallery.
Which setup would be the best solution.
I'm currently thinking about the canvas element, but the lack of specific events for drawn hotspots makes me doubt. EaselJS could be a solution though.
An alternative could be just using a regular javascript image gallery and place some fixed positioned hotspots on it.
This is actually a basic mvc-setup, I have the image gallery, hotspots and the sidebar.
Should I use a javascript mvc library like http://javascriptmvc.com/ or backbone.js
So my question actually is, what would be the best setup, with performance and some basic animation in mind?
Thanks.
other interesting links I found:
http://processingjs.org
http://raphaeljs.com
...
If you are displaying large images or expect users to have older browsers or browsers without current GPU acceleration then you should always use standard HTML4 elements to get this done. Using canvas is overkill and will cause you pain later on if you are not overly-experienced with it.
With DOM-based images you already have click events and can even use image maps to do the click-regions. With canvas you need to code your own click detection and map mouse position to a region to check for clicks.
All in all the simplest solution is usually the best one and for performance and ease of dev, canvas is not the way forward in my opinion.
Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc
Check this:
jQZoom
Zoomimage - jQuery plugin
jQuery ImgZoom
FancyBox
How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.