Question

I created a custom product configurator for a client that uses html2canvas to generate an image of the product after they customize it. It was working perfectly before, but now I have realized that it is trying to make a call to: html2canvas.appspot.com and returning a 404 error. Here is my code:

// JavaScript Document
$('#addToCart').live('click', function(event) {
    event.preventDefault();
    var target = $('.customstole');
    html2canvas(target, {
        onrendered: function(canvas) {
            var data = canvas.toDataURL();

            alert(data);
            $("#dataUrl").val(data);
            // data is the Base64-encoded image passed to a hidden input
            $('form#stoleAddForm').submit();
        }
    }); 
}); 

My question is this… how can i modify this code so that it doesn’t make the call to html2canvas.appspot.com at all. I have been reading alot here on stack and googling alot and I’m hearing that since my images and everything are all right there on my page, that I don’t need a “proxy” url. But I try adding proxy: false, proxy: ”, and proxy: undefined and it still keeps making a call out to there.

If you’d like to see this in action and firebug it or whatever its at: http://stoles.com/stoles/page/customStole

The username is : alex
The password is : superman

If you click “add to cart” you’ll see that it throws a 404 error in the JS pane of firebug.

I’m at a loss on this so any help is appreciated.

Answer 1

I read the sources of html2canvas and it is indeed as you mentioned. If you don’t need a proxy you have to disable this option as it defaults to http://html2canvas.appspot.com/

Try this:

// JavaScript Document
$('#addToCart').live('click', function(event) {
    event.preventDefault();
    var target = $('.customstole');
    html2canvas(target, {
        onrendered: function(canvas) {
            var data = canvas.toDataURL();
            alert(data);
            $("#dataUrl").val(data);
            // data is the Base64-encoded image passed to a hidden input
            $('form#stoleAddForm').submit();
        },

        // disable the proxy feature
        proxy : false
    });
}); 

I’ve tested it using the firebug console, it works! (and firebug rocks!)