javascript - 画像のスケーリングはローカルでは機能しますが、サーバーから実行した場合は機能しません

Question

ブラウザに読み込まれたときに画像をスケーリングしようとしています。ここに私が取り組んでいる私のコードがあります -

function importImage(e) {
    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    var reader = new FileReader;

    reader.onload = function(event) {
        event.preventDefault();
        var img = new Image;
        img.src = event.target.result;

        img.onload = function() {

        width = img.width;
        height = img.height;        
        var scaleX, scaleY, scale;
        var scaledWidth, scaledHeight;
        scaleX = width / canvas.width;
        scaleY = height / canvas.height;
        scale = scaleX > scaleY ? scaleX : scaleY;
        scaledWidth = width / scale;
        scaledHeight = height / scale;
        ctx.clearRect(0,0, canvas.width, canvas.height);
        ctx.drawImage(img, (canvas.width - scaledWidth) / 2, (canvas.height - scaledHeight) / 2, scaledWidth, scaledHeight);       
        }
    }
    reader.readAsDataURL(e.target.files[0]);
}

ローカル マシンから使用すると正常に動作するように見えますが、サーバーから実行するとスケーリングが機能しません。実際の画像をどのように参照しているかに関係していると思いますが、よくわかりません。