title: How to load an image from another site and save in my site? Hitting a CORS issue (I think)
body: <p>I have functionality on a web page similar to posting a url on Facebook. The user inputs an url and an image and description is loaded. The user can then choose to post that image and description (all that works fine). When the user attempts to post the image, the behavior should be: Javascript will pick up the image src, load it to a canvas, resize it, add it to a form dynamically (along with the description), and post it. The result should be the image and description is sent to my server for processing and saving. All this works just fine if I have a local image source. It fails if I have a remote image source. My reasoning is I have a CORS issue, but I'm not sure how to solve it. Here is the function with the error in the comments.</p>
  
  <pre><code>function postNewsAuto() {
      var MAX_WIDTH = 400;
      var MAX_HEIGHT = 400;
  
      var img = document.createElement("img");
  
      /*
       * the src on the next line contains an image from another site
       */
      img.src = $('#auto-news-image').attr('src');
  
      img.onload = function() {
          var canvas = document.getElementById('canvas');
          var ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
          var width = img.width;
          var height = img.height;
  
          if (width &gt; height) {
              if (width &gt; MAX_WIDTH) {
                  height *= MAX_WIDTH / width;
                  width = MAX_WIDTH;
              }
          } else {
              if (height &gt; MAX_HEIGHT) {
                  width *= MAX_HEIGHT / height;
                  height = MAX_HEIGHT;
              }
          }
  
          canvas.width = width;
          canvas.height = height;
          var ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, width, height);
  
          /*
           * this next line fails with the error:
           * Security Error: The operation is insecure
           * presumably a CORS issue
           */
          var dataurl = canvas.toDataURL("image/jpeg");
          var blob = dataURItoBlob(dataurl);
  
          var fd = new FormData(document.forms[0]);
          fd.append("url", $('#auto-news-url').text());
          fd.append("description", $('#auto-news-url').attrib('href'));
          fd.append("image", blob);
  
          /*
           * at this point in the code I post 
           * the form via XMLHttpRequest()
           * this code also works, I removed it for brevity
           */
      };
  }
  </code></pre>
  
  <p>I realize a simple way around this would be to store the image location rather than the image itself and then serve it up as needed. However I want to store it to avoid broken links since the remote image would be out of my control. The real issue is then, how do I get an image from a remote size and save it to my server? So putting aside all the resizing and posting (which I know how to do), at the most basic level, the question is simply, how do I make a copy of an image on my server from a remote site?</p>
  
  <p>One other function is referenced here, dataURItoBlob(). This function also works fine, but I've posted it for reference.</p>
  
  <pre><code>function dataURItoBlob(dataURI) {
      'use strict';
      var byteString, mimestring;
  
      if (dataURI.split(',')[0].indexOf('base64') !== -1) {
          byteString = atob(dataURI.split(',')[1]);
      } else {
          byteString = decodeURI(dataURI.split(',')[1]);
      }
  
      mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0];
  
      var content = new Array();
      for (var i = 0; i &lt; byteString.length; i++) {
          content[i] = byteString.charCodeAt(i);
      }
  
      return new Blob([new Uint8Array(content)], {type: mimestring});
  }
  </code></pre>