将画布作为图像保存到ASP.net中的服务器

Question

I have a page with a google map in it and some data in a couple of divs, I need the user to click "Grab Screenshot" button and that should save the screenshot of the user's page and save it to the server.

I tried through Html2Canvas, but it is not allowing me to convert canvas to dataurl ie in my javascript function, I used this:

    function GenerateImage()
    {
    html2canvas($('#mainDiv'), {
        onrendered: function(canvas) {
            //this appends the canvas(screenshot) to the page, this is working fine
               document.body.appendChild(canvas);
            //this is not working, 
            //Error: SecurityError: The operation is insecure.
            var image = canvas.toDataURL('image/png');
            image.crossOrigin = 'anonymous'; 
            var imgdata = image.replace(/^data:image\/(png|jpg);base64,/, '');

            $.ajax({
                url: '******',
                data: {
                       imgdata:imgdata
                       },
                type: 'post',
                success: function (response) {   
                console.log('Success');
                }
            });
    }
    });
    }

I did research, I found out it is some CORS issue, but I am unable to figure out a solution.

So, I was wondering if I can do a screenshot using ASP.net, is that possible? Thanks in advance.

Answer 1

I was able to successfully do it using the proxy. I had an issue with a custom marker icon from a different website on the map. That was causing the canvas to taint. I moved the image to my website and changed the path, the "tainted canvases may not be exported" error went away.