Retrieving the absolute URL of a temporary canvas element on page

Question

I created a coupon-creator system that uses HTML 5 canvas to spit out a jpg version of the coupon you create and since I'm not hosting the finalized jpg on a server, I am having trouble retrieving the URL. On some browsers when I drag the image into the address bar all I get is "data:" in the address bar. But on windows, if I drag it into an input field, sometimes it spits out the huge (>200 char) local-temp url. How can I use javascript(?) to find that exact temporary URL of the image generated by my coupon creator and be able to post it on an input form on the same page? Also, it'd be very helpful if you guys know the answer to this as well, as I assume it is correlated with the retrieval of the URL: When I click the link that says "Save it" after it's generated, how can I have it save the created image to the user's computer? Thanks a lot!

This is what I'm using in JS right now to generate the image:

              function letsDo() {
                html2canvas([document.getElementById('coupon')], {
                    onrendered: function (canvas) {
                        document.getElementById('canvas').appendChild(canvas);
                        var data = canvas.toDataURL('image/jpeg');
                        // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

                        var mycustomcoupon = new Image();
                        mycustomcoupon.src = data;
                        //Display the final product under this ID
                        document.getElementById('your_coupon').appendChild(mycustomcoupon);
                        document.getElementById('your_coupon_txt').style.display="block";
                    }
                });
              }

Here is the live URL of the creator: http://isleybear.com/coupon/

Answer 1

I ended up dumping this code into the js stated above. It was a pretty simple fix. Then to test it, I set an onclick html element to show the source.

var mycustomcoupon = document.getElementById('your_coupon');
mycustomcoupon.src = data;

}
});
}


function showSource(){

var source = document.getElementById('your_coupon').src;
                        alert(source);
}