如何从另一个站点加载图像并保存在我的站点中？ 碰到CORS问题（我认为）

Question

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.

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 > height) {
            if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
            }
        } else {
            if (height > 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
         */
    };
}

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?

One other function is referenced here, dataURItoBlob(). This function also works fine, but I've posted it for reference.

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 < byteString.length; i++) {
        content[i] = byteString.charCodeAt(i);
    }

    return new Blob([new Uint8Array(content)], {type: mimestring});
}

Answer 1

You have two options suitable for your case.

Bad solution

Setup CORS headers on remote website. However this solution is wrong for you, because you cannot control every website out there and ask them to setup CORS headers for you.

Good solution

You need to write server proxying middleware (Python, Node, etc.) which will send request any remote website and return content. This solution is better because your own server will not hit CORS issue.