快速解决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 图片跨域的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索Canvas.toDataURL
图片跨域
canvas.todataurl跨域、todataurl 跨域解决、canvas 跨域解决、todataurl 跨域、canvas todataurl,以便于您获取更多的相关知识。

时间: 2024-10-23 17:38:55

快速解决Canvas.toDataURL 图片跨域的问题_基础知识的相关文章

深入分析JSONP跨域的原理_基础知识

JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same- Origin Policy"(同源策略).这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档 在同一域下的内容. JavaScript这个安全策略在进行多iframe或多窗口编程.以及Ajax编程时显得尤为重要.根据这个策略,在baidu.com下的 页面中包含的JavaScript

使用JavaScript 实现各种跨域的方法_基础知识

一.一些概念 ①传统Ajax:交互的数据格式--自定义字符串或XML描述: 跨域--通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式.基于纯文本.被原生JS支持.     格式:两种数据类型描述符:大括号{ }.方括号[ ].分隔符逗号.映射符冒号.定义符双引好. ④JSONP:一种跨域数据交互协议,非官方. 1.Web页面调用js文件,可跨域.扩展:但凡有src属性的标签都具有跨域能力. 2.跨域服务器 动态生成数据 并存

js图片预加载示例_基础知识

js图片预加载简单示例 复制代码 代码如下: function loadImage(url, callback) {    if(url!='null') {        var img = new Image();        img.src = url;        if(img.complete) {            callback(img);        } else {            img.onload = function(){               

解决js正则匹配换行问题实现代码_基础知识

复制代码 代码如下: <div id="main"> <div id="left"> </div> <div id="right"> php </div> </div> 如果DIV内没有内容则不换行 把上面的改为: 复制代码 代码如下: <div id="main"> <div id="left"></di

解决 firefox 不支持 document.all的方法_基础知识

今天为Kinoko-World写v2版,遇到了点js的小问题.document.all在firefox下不支持,上网搜索了一下, 用 document.getElementsByTagName("*") 替代就OK了. getElementsByTagName("*") 可以得到得到所有元素的集合 getElemntById 可以按id得到某一元素 getElementsByName 可以得到按name属性得到某一元素 getElementById效果更好啊

使用HTML5中postMessage知识点解决Ajax中POST跨域问题_AJAX相关

由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等.常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信. HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口

xml-webview加载本地图片跨域问题

问题描述 webview加载本地图片跨域问题 html里面没有图片的引用都写到一个xml文件里面html里面只有一个JS引用,加载图片加载不出来只给我一个默认的图片和地址 有好心人回复说是跨域问题我对这方面不懂想问一个demo或者一些代码.谢谢! 解决方案 Android webview加载本地图片Android webview加载本地图片iOS webView加载本地html及图片等问题

Node.js配合node-http-proxy解决本地开发ajax跨域问题_node.js

情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题.  用到的技术:

使用HTML5中postMessage知识点解决Ajax中POST跨域问题

由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等.常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信. HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口