html2canvas跨域问题的解决办法

 

最近有项目需要把web页面生成图片，有朋友介绍用html2canvas.js插件实现，用了下的确很好用，但是投到生产环境却遇到了问题，远程加载的图片(跟html不是一个域名，用的阿里的oss图片存储服务器)，出现跨域问题，提示No 'Access-Control-Allow-Origin' header is present on the requested resource.，意思就是请求的资源没有设置Access-Control-Allow-Origin，网上的答案五花八门又说要在oss后台添加Access-Control-Allow-Origin的，也有在代码中各种秀操作的，就是没有一种能用的，经过几天的查找和摸索终于找到正解。

先说html2canvas.js的用法

html2canvas(document.getElementById('id')，{scale: 2, logging: false, useCORS: true, allowTaint: false, proxy: '跨域的url'}).then(function(canvas) {document.body.appendChild(canvas);})

正解就是html2canvas的第二个参数里的配置proxy为跨域的url，然后跨域问题迎刃而解。

其实细想下，跨域请求很常见写插件的人肯定也又想到，只是html2canvas的说明文档写得不够清晰导致很多使用的人，只能模仿一旦出问题就无法解决。

最后还有就是上例中只解决了一张图片跨域的问题多张图片同时加载该怎么处理呢？

---------------------

作者：胤字堂

来源：CSDN

原文：https://blog.csdn.net/qq_32859565/article/details/83273248

版权声明：本文为博主原创文章，转载请附上博文链接！