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

赞 (0)

相关推荐

  • canvas 弹幕效果（实例分享）

    话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas style="width: 1280px;height: 720px;background-color: rgba(0

  • js+canvas绘制五角星的方法

    js+canvas绘制五角星的方法

    本文实例讲述了js+canvas绘制五角星的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • 微信小程序 canvas API详解及实例代码

    微信小程序 canvas API详解及实例代码

    绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基

  • javascript html5 canvas实现可拖动省份的中国地图

    javascript html5 canvas实现可拖动省份的中国地图

    本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下 1.数据获取 画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中. 新建省份数据数组 复制代码 代码如下: var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-seri

  • JS+Canvas 实现下雨下雪效果

    JS+Canvas 实现下雨下雪效果

    最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果.在没给大家介绍正文之前,先给大家展示下效果图: 展示效果图: 下雨 下雪 看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好 调用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

  • 微信小程序 Canvas增强组件实例详解及源码分享

    微信小程序 Canvas增强组件实例详解及源码分享

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("

  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String   canvas组件的唯一标识符 binderror EventHandle   当发生错误时触发error事件,detail = { errMsg: 'something w

  • canvas的神奇用法

    canvas有一个神奇的方法getImageData这个玩意.它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变. 如果你有各种滤镜的算法.那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能. 使用方法: 1:先将图片导入画布. 2:var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);  //用这个将图片每个像素点的信息获取出来,得到一个数组.注意得到的信息不是

  • javascript+HTML5 Canvas绘制转盘抽奖

    javascript+HTML5 Canvas绘制转盘抽奖

    之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h

  • JavaScript+html5 canvas实现本地截图教程

    JavaScript+html5 canvas实现本地截图教程

    最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.

  • 浅谈jquery中使用canvas的问题

    使用jquery控制canvas的时候会出现一些问题, var cas=document.getElementById('canvas').getContext('2d');//这个是使用JavaScript的方法,这个没有问题. //下面是使用jquery的方法操控canvas. $(document).ready(function(){ var cas=$('#canvas').getContext('2d');<span style="white-space:pre">

随机推荐