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.
Related
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?
Our company's website uses canvas elements to render graphs and charts on our pages. However, these cannot be drag-and-dropped into, say, a Microsoft Word Document or an email client. So I devised a way to replace the canvas with an identical-looking img on mouse down, by getting the base64 data from the canvas.
The canvas is properly replaced by an image on mousedown, and placed back on mouseup. However, this does not allow dragging and dropping the image tag, probably because the replacement happens too late.
Here is a working JSFiddle example.
We use a plugin which also provides tooltips to specific areas of the charts, so I cannot replace the elements on hover in/hover out, as that would stop the tooltips from working.
How do I make dragging and dropping the image itself possible?
Prebuild your img elements at the start of your app instead of taking the time to do it "on-the-fly".
Create your charts using in-memory canvases:
var canvas1=document.createElement('canvas');
// draw your chart on canvas1
Then create img elements from the canvases
var chart1=new Image();
document.body.appendChild(chart1);
chart1.src=canvas1.toDataURL();
your code is working correctly but you can't drop the image onto word because IMO the image is base64, you'll see that if you drag and drop the image onto a new tab in the browser or add a css border or the image id
The Image:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAGQCAYAAAA9TUphAAAgAElEQVR4Xu3dsW5bURBDQfvP/edJHSCFYFnW4WJSJ/a+IRviFvn88IcAAQIECBAgQIAAAQIECBB4u8Dn2y9wAAECBAgQIECAAAECBAgQIPBhoCsBAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQKPD/Svjz+4QgJf/g/7UBpOIUCAAAECBAgQIECAwNMCBvrThG/6AQb6m+D9WgIECBAgQIAAAQIECLxGwEB/jevrf6qB/npjv4EAAQIECBAgQIAAAQK/KGCg/yL2j/4qA/1HOf0wAgQIECBAgAABAgQIvFvAQH93At/9/Qb6d+X8OwIECBAgQIAAAQIECCQFDPRkLA8cZaA/gOSvECBAgAABAgQIECBAYEfAQN/J6t9LDfTV5NxNgAABAgQIECBAgACB/woY6KvFMNBXk3M3AQIECBAgQIAAAQIEDPRTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQIDAky/oAAkQIECAAAECBAgQIECAAIGXCTz+gv6yE/xgAgQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECCtJVbsAAABWSURBVBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBA4C+co8mRzOcVPQAAAABJRU5ErkJggg==
If you copy the above base64 code and paste it in the browser address bar it will render just fine, but if you do the same in word it won't work, so you need to decode the image first before showing it on mouse down
for more information:
Base64 encoding / decoding with javascript
Base64 encoding and decoding in client-side Javascript
Edit:
You can right click on the canvas and then save image as, thus it will be saved as an image file
I have a JavaScript product designer that allows the web page user to add text and images to create a dynamic promo product. The design phase works great, and I use html2canvas to turn their custom product into an image. The image looks great for the screen but is not suitable for printing, which is the ultimate goal.
How can I scale up HTML content (retaining the detail) and save the results as an image (png) ?
I have successfully scaled the image AFTER putting the web content on a canvas, but that clearly loses detail.
I have used the CSS3 "transform" property to scale my image BEFORE applying the content to the canvas. That works and retains the detail and proportions nicely. However, html2canvas ignores that CSS and exports the original size (as confirmed here: https://github.com/niklasvh/html2canvas/issues/176 )
Anyone have experience doing this?
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.
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.