turn toDataUrl base64 string into image on page

问题:

I have created a custom product configurator and i am using html2canvas to generate a base64 encoded string of a canvas element.

If you go to: http://faithpointdallas.com/ecom/page/customStole you can see that when you click "add to cart" at the bottom, it uses the html2canvas script to alert a generated base64 encoded string.

My question is: How can i take that base64 encoded string and turn it into a regular image tag. Like <img src="myconvertedbase64string.PNG" />

Here is the code that is generating the string:

$('#addToCart').click(function(event) {
event.preventDefault();
var target = $('.customstole');
html2canvas(target, {
onrendered: function(canvas) {
    var data = canvas.toDataURL();
    alert(data);
    // data is the Base64-encoded image
}

}); });

回答1:

This might help - it uses jQuery to post the base64 encoded URL to the server and then saves it to a file with some PHP:

http://www.rgraph.net/docs/integration-with-server-side-scripting.html#image

Also, did you know that you can use the data: url returned by toDataUrl() directly as the tag src?