科普文章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. HTTP请求类型详解

    HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务 器)请 ...

  2. centos 7.x编写开机启动服务

    centos 7以上是用Systemd进行系统初始化的,Systemd 是 Linux 系统中最新的初始化系统(init),它主要的设计目标是克服 sysvinit 固有的缺点,提高系统的启动速度.关 ...

  3. JVM中的Stack和Heap

    Stack: 是内存指令区.Java基本数据类型,Java指令代码,常量都保存在stack中,方法是指令也保存在stack中. 由于stack是内存是顺序分配,而且定长,不存在内存回收问题.存取速度快 ...

  4. Modelsim覆盖率

    步骤: 1.compile选项 => compile options  Covrage setting  (或者可以点击选中文件,编辑properties,在coverage中选择要实现的覆盖选 ...

  5. 程序员带你学习安卓开发系列-Android文件存储

    这是程序员带你学习安卓开发系列教程.本文章致力于面向对象程序员可以快速学习开发安卓技术. 上篇文章:.Net程序员快速学习安卓开发-布局和点击事件的写法 主要讲解了布局和点击事件的写法. 上篇文章补充 ...

  6. .Net之美读书系列(一):委托与事件

    开启新的读书之旅,这次读的书为<.Net之美:.Net关键技术深入解析>. 我是选择性阅读的,把一些自己觉得容易忘记的,或者比较重要的知识点记录下来,以便以后能方便呢查阅. 尊重书本原作者 ...

  7. SignalR: The new old thing

    As you can see, this is my first blog posted in cnblog. If you find any mistake, don’t hesitate to t ...

  8. C#数据类型转换的几种形式

    1.隐式转换:一般是低类型向高类型转化,能够保证值不发生变化. 隐式数值C#数据类型转换: 从 sbyte 到 short.int.long.float.double 或 decimal. 从 byt ...

  9. meteor中分页库alethes:pages用法汇总

    1.添加分页库: meteor add alethes:pages 2.新建分页: Pages = new Meteor.Pagination("collection-name") ...

  10. 互联网金融爬虫怎么写－第三课 雪球网股票爬虫（ajax分析）

    大家好啊,话说好久没有出来活动了,组织上安排写代码写了很久,终于又被放出来写教程了,感谢大家一直的支持和厚爱,我会一如既往的帮助大家完成爬虫工程师从入门到放弃的升华. 好,Previous on  系 ...