科普文章from MDN

实践证明这篇里的回答对的：

.起个服务器再在chrome里试一下，应该会跑通。

.右键chrome，属性，在目标后面加上(有个空格) --allow-file-access-from-files

http-server以后就click就有效了。

这样确实也可以，Mac的话用终端带参数启动。

想起来之前看到一个纯canvas的大转盘，点了没反应，估计也是因为跨域。

Canvas.toDataURL 图片跨域问题可以参看这里。

第三种方法：

 img.crossOrigin = "Anonymous"

然而我在function handleFileLoad(evt) {

//加了却没解决问题

evt.result.crossOrigin = "Anonymous";}

然而火狐浏览器不设置也是好好的，说明报的错不准？

那还是谷歌读取本地文件的问题（话说报错也只提到most likely due to跨域问题）

第四种，据说LoadQueue的第三个参数是设置跨域的：

new createjs.LoadQueue(true, "../_assets/art/");//params(是否XMLHttpRequest模式，路径)

第三个参数，高人说已经成为过去式了。

很菜的一个报错：如果is not a constructor...

这样就表示一个类的constructor首字母应该是大写的，笔误写成小写的就没法实例化了。

基于base64的转换：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, 
initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

    <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1">  

    <script type="text/javascript" 
src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script>

    <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script>

    <title>video</title>  

    <style>

        body, html {

            width: 100%;

            height: 100%;

        }  

    </style>

</head>

<body>

    <canvas width="400" height="300"></canvas>

    <img>

<script>

    ;$(function() {

        var cav = $('canvas')[0],

            ctx = cav.getContext('2d');  

        var img = new Image();

        img.src = 'images/robot.png';

        img.crossOrigin = '*';//解决跨域问题，需在服务器端运行，也可为 anonymous

        img.onload = function() {

            ctx.drawImage(img, 0, 0);//img转换为canvas

            ctx.fillRect(0, 0, 50, 50);

            var base64 = cav.toDataURL('images/png');//注意是canvas元素才有 toDataURL 方法

            console.log(base64);

            $('img')[0].src = base64;//canvas 转换为 img

        }  

    });

</script>

</body>

</html>

无关内容仅作记录。。

canvas图片的跨域问题的更多相关文章

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

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

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

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

  3. canvas关于getImageData跨域问题解决方法

    一.问题:在使用html5的canvas是,当用到getImageData方法获取图片信息时,会碰到跨域无法获取的情况,代码如下: document.getElementById("pic& ...

  4. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  5. Web 前端必备的各种跨域方式汇总

    Web 前端必备的各种跨域方式汇总 跨域方式汇总 同源策略 协议相同 + 域名相同 + 端口相同 https://www.xgqfrms.xyz/index.html https://www.xgqf ...

  6. 图片ping、JSONP和CORS跨域

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<由外边距合并到BFC> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时会话 ...

  7. 我是如何一步步编码完成万仓网ERP系统的（七）产品库设计 3.品牌图片跨域上传

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  8. 同一web系统，不同端口的跨域问题

    部署web系统的时候,发现了跨域问题,子系统是用Iframe嵌入到系统里面的,导致父窗口获取子系统的webService和图片时发现跨域问题,如下图所示:问题1:父窗口获取子系统的对象跨域 原因:用这 ...

  9. javascript 跨域汇总

    什么是跨域?当两个域具有相同的协议.相同的端口.相同的host时,那么我们就可以认为它们是相同的域.比如:http://www.example.com/a.html 和 http://www.exam ...

随机推荐

  1. bootstrap系列整理

    去年的九月份做第一版文档站时, 就开始尝试使用bootstrap ,由于当时对node 还一知半解,大部分精力放在nodejs上,bootstrap只是拿来就用,起步文档都没看: 当别人提到 Norm ...

  2. 使用 Date 和 SimpleDateFormat 类表示时间

    在程序开发中,经常需要处理日期和时间的相关数据,此时我们可以使用 java.util 包中的Date类.这个类最主要的作用就是获取当前时间,我们来看下Date的类的使用: Date d=new Dat ...

  3. LSJ_NHibernate第一章 NHibernate介绍

    前言: 说起NHibernate网上资料真不少,但用的人却并不多,说起java的SSH框架大家可能就知道了,这里的H指的就是Hibernate,一款好用的ORM框架,在.net重写了这款好用的框架,名 ...

  4. 如何恢复oracle中已删除的表

    在9i中Oracle引入了flashback的概念,可以将数据返回到某个时间点,但对于诸如drop/truncate等DDL语句却尚不支持.进入Oracle10g,这一缺陷得到了弥补.可以将丢失掉的表 ...

  5. DBHelper 数据库帮助类

    /// <summary> /// 数据库帮助类 /// <author>vito</author> /// </summary> public cla ...

  6. html doctype 作用

    文档模式主要有以下两个作用: 1.告诉浏览器使用什么样的html或xhtml规范来解析html文档 2.对浏览器的渲染模式产生影响:不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScri ...

  7. Linq的简单查询

    Ling的简单查询,记在这里防止忘记,以便随时能够查看 List<int> intArr = new List<int>(); || i == select i; List&l ...

  8. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  9. 破解https和https原理

    http://blog.csdn.net/cch5487614/article/details/6364711 http://www.jb51.net/network/68135.html

  10. 关于mac上的homebrew

    首先它的安装指令并不难: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...