0

I scraping some pages (I know, I know, I shouldn't, but the info from our intranet is not available in any other reliable way). So I inject a small $(...).each(... $.ajax({})); JavaScript and this works fine.

I got most info out of it, but now I need the images. I can get the URL, but I need to store them on the server (or on my local machine first). I can't use the URL because the images are behind username/password authentication.

Can I send them with a $.ajax(multipart/form post - new FormData()) construct?

All idea's welcome.

H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
Johan
  • 53
  • 1
  • 9
  • Can't you just add an authorization header? See for example http://stackoverflow.com/questions/5507234/how-to-use-basic-auth-and-jquery-and-ajax – gd73 Aug 31 '15 at 14:32
  • @gd73 - adding the authorisation header is difficult, it uses expiring sessions, so that would be very difficult. – Johan Sep 01 '15 at 11:15

2 Answers2

0

One idea is to encode them as base64 strings and store them that way. Here's a fiddle demonstrating the method: http://jsfiddle.net/c8n9d4ce/

I also found this fiddle that likewise demonstrates this method.

My code from the fiddle:

    var canvas = document.getElementById("myCanvas");
    var srcImg = document.getElementById("sourceImage");
    var final = document.getElementById("base64Image");

 var img = new Image();
 img.crossOrigin = 'Anonymous';
 img.onload = function(){
  canvas.height = this.height;
  canvas.width = this.width;
    canvas.getContext('2d').drawImage(this,0,0);
    var dataURL = canvas.toDataURL();
    canvas = null;
        final.src = dataURL;
 };
 img.src = srcImg.src;
img {
    max-width: 100%;
}
<h1>Original Image</h1>
<img src="https://i.imgur.com/5YJ3HQ9.jpg" id="sourceImage">

<h1>Canvas Rendered Image</h1>
<canvas id="myCanvas"></canvas>

<h1>Base64 Encoded Image</h1>
<img id="base64Image">
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • As below, under Safari you get the `Cross-origin image load denied by Cross-Origin Resource Sharing policy`, but it works fine under Firefox. Many thanks. – Johan Sep 02 '15 at 07:40
  • @Johan I'm sorry. I haven't had any down time to hang out on SO lately. Cross origin policy is a server setting that can be changed. Some servers allow it while others do not. If it's an in-house server, it can probably be changed. If Firefox allows it anyway, then that works too; although, I don't know how it does. Glad you got it to work though. – Joseph Marikle Sep 02 '15 at 17:10
0

Seems the way to go, I tried, but got this error: "Cross-origin image load denied by Cross-Origin Resource Sharing policy". I tried the snippet on this webpage (just copy/paste into the console).

function getDataURL(srcImg, done) {
     var img = new Image();
     img.crossOrigin = 'Anonymous';
     img.onload = function(){
        var canvas = document.createElement('canvas');
        canvas.height = this.height;
        canvas.width = this.width;
        canvas.getContext('2d').drawImage(this,0,0);
        done(canvas.toDataURL());
    };
    img.src = srcImg.src;
}
getDataURL($("img")[0], function(data) { 
  console.log(data);
});
Johan
  • 53
  • 1
  • 9