首页 > html2canvas截图如何解决跨域的问题?

html2canvas截图如何解决跨域的问题?

1、问题描述
如果不跨域的话,截图正常。

如果有跨域的图片,那么js报错,报错信息如下:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

2、代码

/**
 * 截图
 */
function doScreenShot(){
    html2canvas(document.body, {
        onrendered: function(canvas) {
            canvas.id = "mycanvas";      
            var image =canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
            window.location.href=image; // it will save locally
        }
    });
}

3、补充
看到官方(https://github.com/niklasvh/html2canvas)上面有介绍代理啥的,也没看明白怎么使用,好像还没有java方面的代理。有人能补充一下这方面的使用介绍么?

或者有其他的web页面截图方面的方法也可以介绍下,谢谢~


因为涉及到跨域问题,所以需要借助代理脚本获得外域图片的 base64 编码后的字符串。目前官方给出了几种语言的代理脚本,例如 python, php, node.js,但没有 Java 的。

所以问题的根源在于图片的 base64 编码值,你可以让服务器端直接把图片的 base64 编码值渲染在 <img> 标签的 src 属性里,这样就绕开了这个跨域的问题。

【热门文章】
【热门文章】