脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → Canvas.toDataURL 图片跨域

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

 更新时间：2016年05月10日 15:22:26   投稿：jingxian  
出现Canvas.toDataURL 图片跨域问题怎么解决呢？下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法。一起跟随小编过来看看吧

如题，在将页面的图片地址进行本地输出时（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 图片跨域的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript_ECMA5数组新特性详解

    JavaScript_ECMA5数组新特性详解

    下面小编就为大家带来一篇JavaScript_ECMA5数组新特性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript的几种写法总结

    javascript的几种写法总结

    下面小编就为大家带来一篇javascript的几种写法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 如何获取JQUERY AJAX返回的JSON结果集实现代码

    如何获取JQUERY AJAX返回的JSON结果集实现代码

    我写了个方法,用于查询结果,但debug过程中发现结果集有数据，我如何通过变量获取呢
    2012-12-12
  • 深入理解JavaScript系列（44）：设计模式之桥接模式详解

    深入理解JavaScript系列（44）：设计模式之桥接模式详解

    这篇文章主要介绍了深入理解JavaScript系列（44）：设计模式之桥接模式详解,桥接模式（Bridge）将抽象部分与它的实现部分分离,使它们都可以独立地变化,需要的朋友可以参考下
    2015-03-03
  • JavaScript学习笔记之JS对象

    JavaScript学习笔记之JS对象

    这篇文章向我们详细介绍了javascript中的对象，包括默认对象、数组对象、字符串对象、自定义对象，并通过示例对这4中对象做了对比分析，推荐给大家。
    2015-01-01
  • 详解JavaScript中的表单验证

    详解JavaScript中的表单验证

    这篇文章主要介绍了JavaScript中的表单验证,是JS在前端和服务器端通信部分相关的重要知识,需要的朋友可以参考下
    2015-06-06
  • javascript 基础篇4 window对象，DOM

    javascript 基础篇4 window对象，DOM

    window这个对象我们之前也稍微接触过了，其实就是对窗体进行操作，利用这个对象我们可以实现很多的操作，比如窗口移动啊，设置窗口大小啊等等
    2012-03-03
  • Javascript 按位取反运算符 (~)

    Javascript 按位取反运算符 (~)

    Javascript 按位取反运算符 (~) ，对一个表达式执行位非（求非）运算。如 ~1 = -2 ； ~2 = -3 ； ~99 = -100
    2014-02-02
  • 深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现

    深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现

    这篇文章主要介绍了深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现,本文讲解了数据类型、原始值类型、Object类型、动态性、内置对象、原生对象及宿主对象等内容,需要的朋友可以参考下
    2015-03-03
  • JavaScript 关于事件循环机制的刨析

    JavaScript 关于事件循环机制的刨析

    js里的事件循环机制十分有趣。从很多面试题也可以看出来，考察简单的setTimeout也就是考察这个机制的，接下来本文带你详细了解它
    2021-11-11

最新评论