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

版权声明:本文为博主原创文章,转载请附上博文链接!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 流量之于互联网公司,就如同水之于万物一样重要,那么当今国内的移动互联网流量主要集中在哪里呢?答案是显而易见的...
    ChrisZ_B612阅读 115,119评论 71 170
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,325评论 0 6
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    HeroXin阅读 856评论 0 4
  • 原文地址:原文地址 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义...
    C_Y大渔阅读 1,266评论 1 13
  • 今天下午陪儿子游泳训练,第一次看到他这么认真练习,心里有几分酸涩与感动! 以前做什么事时,没做几分钟就不耐烦了,还...
    风信子的梦想阅读 196评论 0 0