1

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 i.e 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.

lambda8
  • 317
  • 1
  • 4
  • 17
  • You can try: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob – Cat_Clan Sep 26 '16 at 23:25
  • thanks for the response, I tried that one too, I am getting this error - Uncaught SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported – lambda8 Sep 26 '16 at 23:35
  • I see... you can try http://stackoverflow.com/questions/16235161/save-current-google-map-as-image. Maybe you are just missing useCORS: true – Cat_Clan Sep 26 '16 at 23:49
  • "useCORS": false, "allowTaint": false, "logging": true, "proxy":"html2canvasproxy.ashx", I set useCORS to false and added a proxy, it still doesnt work, the screenshot is perfect but I cant export to png, it says the tainted canvases may not be exported. – lambda8 Sep 27 '16 at 01:27

1 Answers1

0

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.

lambda8
  • 317
  • 1
  • 4
  • 17