jQuery.ajax() gives broken image data?

Question

I'm trying to add an AJAX call via jQuery.ajax() to a page acquired by Phantomjs to download an additional image /myfile.jpg:

var result = page.evaluate(function() {

    var out;
    $.ajax({
        'async' : false,
        'url' : '/myfile.jpg',
        'success' : function(data, status, xhr) {
            out = data;
        }
    });
    return out;

});

fs.write('myfile.jpg', result, 'wb');

The data seems to be successfully downloaded and saved to local file myfile.jpg but it's a broken image and can't be opened at all.

The file size seems to be correct but I'm not sure. The content opened in Notepad++ text editor is NOT texts but lots of unrecognized characters or bytes.

What a I doing wrong here?

Why do you need to do this? Downloading files via AJAX is very flaky at best and a bad idea at worst - especially when dealing with binary file types. You should also remove the `async: false` setting. If you check your console you'll even see a warning from the browser about its use. — Rory McCrossan, Nov 07 '16 at 11:56
You mention both `.jpg` and `.png` in your question. Are you saving the file in the wrong format at some stage? — Turnip, Nov 07 '16 at 11:56
"The content opened in Notepad++ text editor is NOT texts but lots of unrecognized characters or bytes" - it's a binary. You open an Image file. What did you expect to get? — Dekel, Nov 07 '16 at 11:58
This is confusing, you're downloading a binary image file with ajax, which is ... just wrong, then you say you're opening the file in Notepad++ and it's not text, just *"unrecognized characters or bytes"*, well what did you expect, it's a binary file ? — adeneo, Nov 07 '16 at 11:58
@RoryMcCrossan, we need to save arbitrary files from Phantomjs webpage. AJAX calls seem to be the only way thus far other than taking screenshots which may look very small for large files. — datasn.io, Nov 07 '16 at 12:00
@Dekel, If it's binary, why can't it be opened correctly then? — datasn.io, Nov 07 '16 at 12:01
@kavoir.com in which case I'd suggest you open the image via a `canvas` element and save it through that instead: http://stackoverflow.com/questions/17397319/save-canvas-as-jpg-to-desktop — Rory McCrossan, Nov 07 '16 at 12:01
@kavoir.com because it's binary...? How would you expect an image to be represented in text? — Rory McCrossan, Nov 07 '16 at 12:02
It can, but with a program that has abilities to open (and view) binary data, not notepad++ (which is a text editor). You can use any Hex Editor for that. — Dekel, Nov 07 '16 at 12:02
Possible duplicate of [Nodejs: returning result on async result](http://stackoverflow.com/questions/32631790/nodejs-returning-result-on-async-result) — Ruan Mendes, Nov 07 '16 at 12:46
@RoryMcCrossan, the canvas solution works but the image saved is tremendously larger than the original. We downloaded a image xxx.jpg that's 27KB but end up being saved to local a 312KB file. This is unacceptable considering we have million of files that need to be saved. What could be the problem? — datasn.io, Nov 08 '16 at 03:45
Assuming you're using `toDataUrl` then you can provide the quality to save at as the second parameter: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL. If not, then it may be worth starting a new question. — Rory McCrossan, Nov 08 '16 at 08:07

score 1 · Answer 1 · 2016-11-07T12:43:00.853

1

You need to use the download function instead.
http://docs.casperjs.org/en/latest/modules/casper.html#download

But, you probably won't be able to download a file if its size more than 7MB.

You can also use PhantomJS with Download support (By Vitallium)

edited Nov 07 '16 at 12:43

answered Nov 07 '16 at 12:35

2

Also: won't be able to download files with CasperJS if there's some cookie-based server authentication. – Vaviloff Nov 07 '16 at 12:52
Is there any docs regarding how to use the [download support](https://github.com/Vitallium/phantomjs/tree/download-support)? I guess I have to manually compile the download support version? – datasn.io Nov 08 '16 at 03:09

jQuery.ajax() gives broken image data?

1 Answers1