javascript - 在 ASP.net 中将 Canvas 作为图像保存到服务器

Question

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

我尝试通过 Html2Canvas，但它不允许我将 canvas 转换为 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 进行屏幕截图，这可能吗？提前致谢。

Answer 1

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