如题,在将页面的图片地址进行本地输出时(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. java图形界面写个小桌面,内置简单小软件

    一.做个这样的效果,双击图标打开相应的应用 二.主界面类,使用JavaSwing的JDesktopPane类创建这个桌面 package com.swing; import java.awt.Bord ...

  2. 将C#datagridview控件的数据导出到Excel中

    1.添加引用Microsoft.Office.Interop.Excel. 2.程序代码引用using Excel = Microsoft.Office.Interop.Excel; 3.控件事件代码 ...

  3. CC1310电源管脚

    对于48pin脚的CC1310而言,属于电源类的管脚如下: 上述电源类管脚的关系如下: 1 VDDS类管脚 VDDS类管脚包括VDDS.VDDS2.VDDS3和VDDS_DCDC四个管脚.其中VDDS ...

  4. git代理设置方法解决

    git config --global https.proxy http://127.0.0.1:1080 git config --global https.proxy https://127.0. ...

  5. Linux基础-常用命令

    常用的压缩命令 一.tar 1.压缩:tar zcvf [压缩包名].tar.gz [待压缩的文件名 ... ] 2.解压缩:tar zxvf [压缩包名].tar.gz -C [指定的解压目录] 3 ...

  6. linux下添加链接与删除链接(ln命令的用法)

    添加链接使用ln命令用法:#ln --help用法:ln [选项]... 目标 [链接名]或:ln [选项]... 目标... 目录或:ln [选项]... --target-directory=目录 ...

  7. js的form基础知识点

    在HTML 中,表单是由<form>元素来表示的,而在JavaScript 中,表单对应的则是HTMLForm-Element 类型.HTMLFormElement 继承了HTMLElem ...

  8. python学习之——eclipse+pydev 环境搭建

    最终选用 eclipse+pydev,网上相关资料也是极多的~~~ 1.安装python: 2.安装eclipse: 3.eclipse中安装pydev,eclipse中help—>eclipl ...

  9. 谷歌Cartographer学习(1)-快速安装测试

    谷歌自己提供了安装方法,但是安装比较繁琐,我做了一定的修改,代码放到个人github上,https://github.com/hitcm/. ros下面的安装非常快捷,只需要catkin_make即可 ...

  10. C#邮箱发送验证码

    public static void SendTo(string mailAddress, string subject, string body)        { //mailAddress 所要 ...