如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题:

【Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sub2.xx.com' is therefore not allowed access.】
解决方案:
根据错误分析需要在控制头增加“Access-Control-Allow-Origin”,即允许访问源文件权限,那么我们对这个页面【注意是要输出页面的图片】这样处理:
var img = new Image;
img.onload = myLoader;
img.crossOrigin = 'anonymous'; //可选值:anonymous,*
img.src = 'http://myurl.com/....';

或者是HTML中

<img src="" id="imgclcd" crossorigin="anonymous">

核心是请求头中包含了 Origin: "anonymous"或"*" 字段,响应头中就会附加上 Access-Control-Allow-Origin: * 字段,问题解决。



解决Canvas.toDataURL 图片跨域问题的更多相关文章

  1. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  2. canvas.toDataURL 由于跨域报错的解决方法

    关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报 ...

  3. html2canvas - 解决办法之图片跨域导致的截图空白

    1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为 Access-Control-Allow-Origin:  * 2. 前端配置 var opts = { scale ...

  4. Access to Image at 'file:///Users canvas本地图片跨域报错解决方案

    1.设置跨域 添加跨域条件   crossorigin="anonymous" 前提是后端支持这个图片跨域 2.上面加了之后还是报错 如标题所示 你需要把你的项目放到服务器上面跑 ...

  5. canvas 使用图片跨域问题

    项目中需要生成海报,使用了前端生成图片的插件,将背景图,详情图,以及部分的文字说明放在一块并且生成一张新的图片,大体看了一下源码是通过canvas来实现的,在本地的时候完全没有问题,提交到服务器之后就 ...

  6. 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...

    问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...

  7. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  8. 解决阿里云OSS跨域问题

    解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...

  9. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

随机推荐

  1. JDBC性能优化点

    1). 指定数据库连接池中初始化连接数的个数

  2. IIS发布项目 遇到的error

    HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容. 重新注册一下.net framework试试,当然这一步骤也可以排在第一位. 32位的Windows: ...

  3. 设置Headers

    import urllib import urllib2 url = 'http://www.server.com/login'user_agent = 'Mozilla/4.0 (compatibl ...

  4. ORACLE FAQ

    Q:sqlplus连接时报:ORA-12560: TNS:protocol adapter error A:1:cmd命令行上: C:\> set ORACLE_SID=orcl orcl是设置 ...

  5. NSDate 刚刚、几分钟、几小时

    - (NSString *)minutesAgo { NSDateFormatter *fmt = [[NSDateFormatter alloc] init]; fmt.dateFormat = @ ...

  6. MAGENTA: Meta-Analysis Gene-set Enrichment of variaNT Associations

    MAGENTA是一款计算工具,利用全基因组遗传数据,计算预先设定的涉及生物过程或者功能性基因集在遗传相关性的富集程度.开发的目的是分析基因型不是现成的数据集,比如大型的全基因组关联荟萃分析.在以下两种 ...

  7. jQuery停止动画——stop()方法的使用

    很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...

  8. JavaWeb 学习003-简单登录页面功能实现

    先说下题外话:学习不是看你学了多久,重点是学到多少: 这就要求   效率.我在这三个小时,但是有效率的又有多久?只是做了这么一点简单的事. 登录页面 跟数据库交互,进行判断是否登陆成功.我只是实现了一 ...

  9. JavaWeb 学习001-登录页面-Servlet

    那什么是Servlet呢? 我理解的Servlet 就是一个中间媒介,jsp页面原本需要一些操作,但是现在让jsp页面只是显示就好,把操作的工程转移给Servlet中. 使用Servlet时候有个固定 ...

  10. Cookie的Secure属性

    基于安全的考虑,需要给cookie加上Secure和HttpOnly属性,HttpOnly比较好理解,设置HttpOnly=true的cookie不能被js获取到,无法用document.cookie ...