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

【问题标题】：Save a canvas as an image to the server in ASP.net将画布作为图像保存到 ASP.net 中的服务器
【发布时间】：2017-02-04 06:28:27
【问题描述】：

我有一个页面，其中包含谷歌地图和几个 div 中的一些数据，我需要用户单击“抓取屏幕截图”按钮，这应该保存用户页面的屏幕截图并将其保存到服务器。

我尝试通过 Html2Canvas，但它不允许我将画布转换为 dataurl，即在我的 javascript 函数中，我使用了这个：

    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');
                }
            });
    }
    });
    }

我进行了研究，发现这是一些 CORS 问题，但我无法找到解决方案。

所以，我想知道我是否可以使用 ASP.net 进行屏幕截图，这可能吗？提前致谢。

【问题讨论】：

你可以试试：developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…
感谢您的回复，我也试过了，我收到此错误 - Uncaught SecurityError: Failed to execute 'toBlob' on 'HTMLCanvasElement': 受污染的画布可能无法导出
我明白了……你可以试试stackoverflow.com/questions/16235161/…。也许您只是缺少 useCORS: true
"useCORS": false, "allowTaint": false, "logging": true, "proxy":"html2canvasproxy.ashx"，我将 useCORS 设置为 false 并添加了代理，但它仍然不起作用，截图很完美，但我无法导出为 png，它说可能无法导出受污染的画布。

标签： javascript jquery asp.net html html2canvas

【解决方案1】：

我能够使用代理成功地做到这一点。我遇到了来自地图上不同网站的自定义标记图标的问题。这导致画布受到污染。我将图像移动到我的网站并更改了路径，“受污染的画布可能无法导出”错误消失了。

【讨论】：