Upload a <img> to server without going through canvas? - javascript

It would concern images which have their src pointing to other domains or as file://. (user pasting html code into tinymce)
Basically:
I have to do this client side (can't download from server)
I only need to support firefox
I'm using javascript and html5 and if possible plupload
I'm worried that canvas only returns raw pixel data and that the original compression of the image gets lost.
It just seems wrong to make a second copy in memory and then convert it to data:// to upload a file the browser already has in memory. (by the way base64 data is usually a lot bigger than binary)
I am hoping it would be possible to tell firefox to upload a file from it's memory cache or use the FileReader or Blob functionality.
edit: if this is correct, it won't even work cross-domain with canvas.

As far as I understand it, this is impossible due to security limitations preventing javascript from accessing any data that has come from another domain.
It looks like I would have to write a firefox addon in order to enable this. Not quite the same level of service if users have to install an addon though.

**you can use other domains using don not use src image filed use upload manger to this
you can use other way by put .** <img src = '/*url*/' ></img>

Related

Programmatically save or get byte array data (to save by other means) of images on page in any browser without having to redownload them again

I'm looking for a way to save the images on a page I'm browsing (scrape-as-you-browse essentially), without making repeated download requests. There are multiple cases where the images simply won't download properly if you try that, and since the browser already has downloaded them once, I feel like there has to be a way to avoid wasting internet traffic and time spent waiting for images, especially large ones, to download again. Maybe there is a way to read them from cache which I haven't found yet.
I've already tried using canvas to redraw the images and get the base64-encoded string and getting a binary blob array of bytes, but these methods don't work if there are any CORS restrictions. And also these won't result in the original 1-to-1 image bytes.
Is it possible in any modern browser to get the images which have already been received (as you can see, for example, in Firefox > Tools > Page info > Media tab) without making a second download request?
I would then send the byte array (or base64 encoded string of it) of the source image file to a localhost address to save it as a file using a listening app (this part I've already implemented).
I'm not looking for browser addons/extensions or which menu buttons to press in browser GUI, but for javascript methods I can call in a userscript via GreaseMonkey (or any other userscript extension that supports a working solution) to get the source image file data.
I've already looked at older questions and they either don't have any working answers or the answers have problems like CORS or lossy canvas redrawing or repeated download requests which may not work, as described above. So if you link to a duplicate, please make sure it has a solution that works without those caveats.

Simulating user event

I have a web page with a file swf and an HTML button: when I click the button I want to save (download to my disk) the current image my swf file is showing (it is a sort of image gallery).
It perfectly works when the button is inside my swf but it fails when -through ExternalInterface- I call from JavaScript the method that saves the image.
I verified the JS-AS communication (it's ok) and I know that FileReference.save() only works when triggered by a user event. Probably, the click on an HTML button is not considered a user event.
Aside from changing anything (eg, moving some code on the server side, sending the image to server, then downloading it...), is there any way to simulate a user event? Any other solution or tip is appreciated.
NB: I would use a Flash button but the HTML is required.
Solution (or not as the case may be)
Flash based
Currently I would say your best bet is to stick with your button operating from within Flash. If you need to dislocate the button from your main Flash runtime, you could try what you are doing using two embeds of Flash and communicate between them using LocalConnection. I wouldn't recommend this however as LocalConnection is a pain to get working well, and there is no guarantee that you wont come up against security sandbox problems working across two instances.
Server-side based
You could implement a save system that would involve sending the image data back to a server and forming an actual URL that your front end could request. This would allow you to specify whatever you wanted for the download. The downsides to this are that it requires a server (so wont work for offline apps), it also requires quite a lot of hassle of sending the image data one way only to pull it down later...
I've gone in to more detail about this here:
Canvas Image to an Image file
HTML5 based
Currently I wouldn't recommend the Data URL download as I suggested in my comment because it is not a complete solution yet. However, on the plus side I'd keep an eye out on what the top browsers are implementing though, because that answer could change shortly.
Workings
Basically I just tried to implement an image download via a data URI (thinking this would be the best solution for your poblem), which all works fine, plus you could quite happily derive the Base64 data you need from your BitmapData object. However, the problem is that there is no way to specify a filename along with the download. So you end up with rather ugly filenames that don't even have the correct extension.
Click to Download File
After researching a bit it seems there isn no workable workaround for this, but there are specifications that are ready to be implemented that would help:
<a download="filename.png" href="data:image/octet-stream;...">Download File</a>
The download attribute is designed for precisely the problem I mention above, and would allow naming of the download. Unfortunately I can't find a browser that implements it yet...
References
about the download attribute of an a tag
more about the download attribute of an a tag
stackoverflow : suggest a file name when using data uri
stackoverflow : force download an image using javascript

How to save indirectly loaded images from webpages

I know that most of the media in web pages are temporarily stored to a temp folder or browser cache. Some are directly embedded in web pages so that we can see the source and can save them. But how to save images loaded using any other method?
You can see what I am talking about here. Is there any solution to save images from this site's gallery?
Yes there is a way to save the images by using the followings
1) Mozilla Firefox
2) Firebug
open the net console in it and select the tab named images
in that u can see all the images and save the images
for your reference, I attached a image.
then copy the location by right click and paste the location
and get the image.
~~~~~~ Happy Coding ~~~~~~~~~~~
Generally, js can't hold the image itself. but the Attribute src, a string instead. And js cannot handle the file on client, you can't modify, move, or copy files. So if you want to keep the images, you can send a http header like if-Modified-Since on server side with php or java, then the browser will not load the image again.
May this will help you. Good Luck!
You could try to use a offline browser.
They save whole webpages and deeping on software they catch more or less.
Offline Browsers

html + javascript: Browsing a folder using browse option

I need to have my user send the file path to the webserver. For this i'm trying to use input file type so that user can select the file. Please note that I don't want do uploading the file. I just need the location of some file. So user should be able to do that using browse option. I know that due to some security reasons in browsers, full path is not sent to server. But can we acheive this some way. I've observed that using input type=file after user selects some file using browse option (as it is not possible to select folder), the Firefox sends the server just the filename and IE sends fullpath of file including file name.
Please note that this website is used internally so it is not a security problem at all, so don't bother about security and all.
is there anyway we can acheive this?
Thanks in advance,
Sreed
You need to use something that has access to the filesystem. BY DESIGN javascript/html cannot do this. You need to use flash, java or a browser plug-in.
No, sadly I don't think there is.
All modern browsers will send a C:\Fakepath path. To my knowledge, this behaviour can not be changed for local networks in any browser.
I'm not sure what the state of things is for Flash-based uploaders like SWFUpload or Uploadify. Flash traditionally gives more control over such data than the native browser controls. (Edit: Uploadify seems to give you the file path. See this question: How can I get the uploaded file details from uploadify after completion however, this of course is after a completed upload, which is not what you want.)
A Java applet based solution will be able to do this, but I expect the effort to implement this is huge.
I would consider using a normal text file, and asking the user to just copy+paste the correct path.
Browsers do not let you save or even see the full file path to a selected file from the <input type="file" /> form element. I would recommend Flash or Java for your needs. You could also have the user manually type in the full path...just a thought.

JavaScript to Flash and Back?

I am completely new to flash. We need to load a binary file from the user system (must work in Flash 9) and do some process in flash and save it back to the file system. I think that this would have to be done by getting the file in JavaScript and then encoding it send it to Flash.
Local file system access is in Flash 10 with the File Reference enhancements. You're out of luck if targetting Flash 9.
Javascript cannot access the local filesystem either.
http://weblogs.macromedia.com/flashjavascript/
http://kb2.adobe.com/cps/156/tn_15683.html
Those are two good links reguarding javascript communications
alternatively, you can make a JavaScript Flash file and make a window SWF, which has full file access. However, this could never be used on the web

Categories