I want to be able to use a Greasemonkey script that can take an image from a page, scan it for the darkest pixel, and then return those coordinates to the browser.
Originally, I used a flash script... Greasemonkey embedded a local flash file that would fetch the image based on a URL in the source of the webpage, use ActionScript to get the darkest pixel, and then send a POST request with those coordinates as values.
The problem is, I only want to download the image one time. With this method, it does it twice (once in browser, once in flash). Is there a way to manipulate an image from a webpage within Javascript or with another client-side language? I tried using a Canvas, but you cannot perform the getImageData() function on images hosted on remote servers.
You could load it in flash only, and do with your image whatever you want, then if you need to show it in the page you could encode the image as base64 string of the PNG (you will need AS libraries for PNG and base64 encoding).
The next step would be to pass the string to javascript, and in Javascript you could take advantage of the ability to embed base64 images (supported in Firefox, opera, not IE).
The syntax is:
<img src='data:image/png;base64,ABCDE...'>
where "ABCDE..." is the base64 string generated in flash.
This way you would only get the image once, but still will be able to show it as a normal html image.
I used this technique in a pet project i created (www.creationempire.com/tstyles) to generate the images in a online image generator, and got the original idea from http://danielmclaren.net/2008/03/embedding-base64-image-data-into-a-webpage
Hugo
Related
What is the fast(est) way to display one frame of the video on the page?
I have an <input type="file" /> for choosing a video file, and I am trying to display just the first frame out of it, as a preview, but FileReader seems to be too slow. I made a simple video preview with base64 logic, and it works fine with ~1mb file sizes, but for ~20mb+ videos there is a huge overload while the video file is being processed for the preview.
I'm wondering if there is any way to display it inside
<canvas> or <img> without loading the whole file? Thanks!
There is no need to go through a FileReader which will read the entire stream into memory.
Just use the File blob directly as source via URL.createObjectURL() and the browser will buffer the load which allows you to extract a frame faster (as well as using less memory).
I'm wondering is there a JavaScript library available that would allow me to generate an Image from the contents of a DIV.
Basically this is required for some Server-Side Printing code, which needs to print a background from the Browser.
What I'd ultimately like to do would be encode the DIV contents into PNG format and post up the encoded data with the print operation.
Any ideas if this is possible ?
[EDIT] What I have is a mapping application where background data is coming from an image server straight into a browser DIV (Think Google Maps). That div is background to me main data. When Print is pressed the server generates a PDF from the data it knows about, but knows nothing about the browser's background data. What I'd really like is to be able to provide the server with the browsers background image in some way!
Cheers,
Ro
Maybe it's possible with the Canvas:
MDN - Drawing Graphics with Canvas
You can create an image tag from JavaScript but not the actual image in it: JS has no commands to allocate memory for the bitmap and it has no commands to render anything on it.
The usual solution is to have a report generator on the server which creates the image on request. Look at BIRT or JasperReports.
[EDIT] Based on your comment, the solution is simple: Examine the DIV, find the URL for the background image and replace the DIV with an IMG element. Put the URL into the SRC attribute and then print.
Very interesting question.
Actually I solve this problem using ajax (transfer images' positions to the server, server creates one image from pieces, save it and send url to the client). I don't very like this solution but I don't know other yet.
I really don't think this is possible on the browser, certainly not without some kind of plugin.
Could you send some coordinate info or something to the web server and that way have the web server request the same map image from the image server?
Generating images was only possible in IE5 :( Then due to security reasons it was dropped. I'm still missing it.
I think I've worked out a way to do it.
1) When the user presses Print, interrogate the DIV
2) Images on that DIV are being generated by the OpenLayers API
3) Grab the URL of each Image
4) Grab the location on screen of each image
5) Translate the screen location into a Real-World location (I have API for this)
6) As part of the print send up all the image URL's along with their real-world extents
7) Allow the server to re-request the Images and draw them into their appropriate locations.
Does it have to be done on the browser side? I have seen where you can do a server side call and the MIME type on the server response is the image type. I think the example I'm thinking of was for b64 encoded jpegs in a db, but the process should be the same. The response would be the data that is currently in your DIV. Sorry if I'm way off base.
This example shows a map created with the ammap library. This library creates the map using SVG. I want to use this map in a PDF/XLS report that's generated on the server-side, so the first step (I think) is to convert it into an image format that can be embedded in PDF/XLS documents.
If you click the Export button the SVG is converted to a base64-encoded PNG and added to the DOM. In other words, the following element is added to the DOM (base64 encoding abbreviated)
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAAAByNR6YAAAgAElEQVR4nOydd3hU55n26aJJAoHoiN6r6WDAuFFscMXdxhgbG2PADWOK4ySbuok32V3vJrGdsmmbOP6SdbLxRqOu6XPOgCRUZ0aj3jUz0vQz9f7+ONJIozqjM">
However, rather than appending the PNG to the DOM, what I really want to do is upload the image to the server, is this possible?
I think you could send your png image to the server in a post request. With luck you could even get the .pdf result in that request. Check the instructions on how to retrieve the binary data for your image: Get image data in JavaScript? (Just noticed that you already have the base64 data, so you are already half the way towards the solution)
I'm looking for a way to check whether a specific image has been loaded on a webpage with Selenium IDE.
My first try was to generate a hash value of the image but this doesn't seem to be possible with javascript. I then found out that you can base64 encode an image if you load it into a canvas and then call toDataUrl(). However this doesn't work if the image is located on another domain.
My image server provides a standard "image not found"-image. I want to check if a specific image was successfully loaded by comparing the loaded image against the failure image. Do you have any ideas how this can be achieved?
Have you looked at 'selenium signature' as a plug in to the ide? https://addons.mozilla.org/en-US/firefox/addon/selenium-ide-signature/
It will make a crc32 signature of the element like *html=50D5FBD3*css=5BBF6784*img=81AD9F9D*
You'll only need the *img=81AD9F9D* portion to validate an image.
Is there anyway to take take a "screenshot", "save" or "capture" the active SWF element on a page as an image? I'd like for users to be able to simply click a button on my page, instead of having to need to manually take a screenshot of the entire page and then crop the image to show only the SWF element.
I found a Jquery method, although I am unsure if it could work with SWF files. It basically captures an area of an Image element on the page and allows you to save that as a separate image. What I would need however, is to capture the SWF as the image instead. Note: I do not have access to the SWF code so I cannot achieve this using Actionscript or anything like that -it has to be purely done with PHP and Javascript.
Thanks for any ideas :)
I don't think that there is a way to do this from Javascript, but if you host those swf files on your own server you could create a wrapper swf which loads the swfs you want to screenshot dynamically and then draws them into a BitmapData object.
The snapshot process inside of the swf can be triggered from Javascript via ExternalInterface, after that you can either serialize the raw pixels or use a PNG or JPEG encoder inside the wrapper swf to convert the bitmapdata to a image file and then send that data back to Javascript via ExternalInterface. Or you use the FileReference class in the swf to save the image file directly on the user's hard drive - one caveat in this is though that in order to trigger the save process the user will have to click a button inside the swf (that's a security feature).
There is one more prerequisite and that is that the swfs that you load into the wrapper have to be hosted on the same domain as the wrapper swf, otherwise the security sandboy will not allow to take a bitmap snapshot of it.
Look at ByteArray.getPixels(0,0,stage.stageWidth,stage.stageHeight) or var b;BitMap = BitMapData(stageW,stageH).draw(stage), depending on your needs. Note that the above two lines are not proper code, just the correct object and function names written in shorthand and from my head.