Suppose, I have a web page and it's showing in the web browser. Is it possible in Javascript to do the following:
The whole visible webpage (without scrolling, just whatever is visible at a point), I draw an area on that using my mouse (either by drawing or by just selecting a two points as a rectangle).
I click a submit button, and that visible area is converted as an image and saved to the server / client computer or whatever way, but I get the image.
I just want to know whether this is technically feasible, if yes, how ?
Yes, maybe you could try using jsFeedback? I know Google does this as well.
Also, http://html2canvas.hertzen.com/
For security reasons, No. If you're on an intranet or want to use it only privatly you may research into making a custom browser plugin that can do this for you.
Related
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 am trying to protect my website content by putting scripts to deny the right click and to see the source code in the browsers. But this is not sufficient. I want to know how to watermark only the original file and not the image that is seen on the webpage.
For example, an image that users can see on the web without watermark and when they click right and select "Open image in a new tab" they go to "website.com/image.png" and they see the watermarked image.
Is this possible?
P.S.: Sorry for my bad English, I'm not a good writer.
Thanks
Serving users a image which is not watermarked is not a good idea because they can download it easily so the best way will be watermark every images and render it users by slicing it. Slice the image and show only the image and hide the water mark and whey they will open it in new window full image will be loaded with the water mark
For creating Watermark on the fly with php
http://www.developphp.com/view.php?tid=1147
And for slicing image i don't know how to do that but i know it is possible but there are many ways to do it like you can zoom it to hide watermarks.
First of all, this will not stop them from downloading the image without watermark, because they can disable javascript, or simply right click on the image and save it right there, or the worst: simply do a print screen and save it to paint then crop it. Probably the best option is to have watermark on all of your images, on the website and on the direct access.
I need to make a visual effect in that multiple cursors (pointers) are shown simultaneously in different parts of a webpage. The easy solution is to make my own *.cur image and to use it as a 'cursor' css property value for the real cursor and as an image with fixed position for all the fake cursors. By I'm not going the easy way!
I try to access the system's (or browser's) default cursor image and use it, so that everyone will see his own cursor, not mine custom one.
Is there any way to access this image? I mean the one that is used than the css 'cursor' property is set to 'default'.
I believe that to be an Operating System cursor, not browser. I would go for the easy solution to use an custom image for the cursor and using the same image for the fake cursors
I need to suppress the default right click menu for flash embeds.
I've set menu to false, as well as used a stop default function on the right click event, but it still displays the menu.
Also, I don't have access to the .fla's, as the flash objects weren't created by me.
Thanks in advance!
Without the fla's (and altering those wouldn't even give you what you want anyway), you'd need to do something to cover up the swf file in the HTML - e.g., a <div>.
This, however, would also block any left clicks, and if you don't want that, the only way I know of (and I'm quite sure it is the only way, safe variations) is to make code additions in order to get the left clicks through. It's a hack anyway - even more than the swf-covering <div> is in the first place.
In order to cover the swf, its window mode (wmode param) needs to be set to "opaque" (or "transparent" if areas inside the swf need to be transparent). Both change the render mode of FlashPlayer so that HTML can be displayed on top of it (the default wmode="window" causes it to render on top of anything else). Both alternative wmode params lower performance somewhat ("transparent" more so than "opaque"), and both introduce certain unpredictable and seemingly unrelated bugs in FlashPlayer (again, "transparent" more so than "opaque"). E.g. YouTube do support changing the wmode param, so in their case, it should be bug free - but others have had troubles getting it to work. See e.g. How to make videos on Youtube not cover a lightbox?
After setting the wmode to "transparent", you can place a <div> absolutely to cover the swf, which means it'll capture the left clicks before they reach the swf. Remember that IE6-8 will not capture clicks on an element that is transparent, though - so you'd need a color + alpha = 0 - or a transparent png/gif - for the background of the element.
As a side note, just to cover the concept of letting left clicks pass through to the swf (which requires additions in the source code/fla): You'd basically let the <div> capture the mousedown events, and pass the coordinates on to Flash via ExternalInterface. Could do the same for right clicks. This allows - and is the only way, even if it's very, extremely hacky - to make e.g. special right click functionality for Flash, rather than showing its context menu.
Until FlashPlayer 11.2, that is. It adds support for right/middle clicks - as well as locking the mouse etc. (but it's still unlikely that you could do so without access to the source).
In any event, unless you really need this (and there are such cases), it's a better idea to find alternatives - even if not quite as bad an idea as disabling the right click menu on a webpage in general.
In Flash Builder:
var myContextMenu:ContextMenu = new ContextMenu();
myContextMenu.hideBuiltInItems();
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.