科普文章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. 删除主目录下的.ssh目录下文件对boot2docker启动影响

    现象: 1) boot2docker ssh需要输入密码 2) boot2docker start 或 up 需要输入密码 解决方法: 1)删除 /Users/sunzhaoyu/.boot2dock ...

  2. 使用modelsim仿真DDR3时编译出错的解决方法

    Modelsim 10.1c release note sates as : Product Changes in 10.1c Release 10.1b introduced a new error ...

  3. gulp自动化框架的搭建

    自动化框架的搭建:https://github.com/zjhsd2007/www 屏蔽掉的部分是Test(文件夹的目录 也是你的项目名称);本地项目启动后 配合sass,会自动启动浏览器,然后好处多 ...

  4. Unity3D NGUI学习（一）血条

    这次来讲讲Unity3D NGUI这个插件的学习,这个插件是收费的,不过去网上可以下载得很多可用版本.用来做用户的交互UI,学习起来比较简单 第一步,导入NGUI包 http://pan.baidu. ...

  5. [理解ASP.NET Core框架]一个五十行的控制台Web

    在阅读了Artech的ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程之后, 自己做了一个"迷你版"中的"迷你版" ...

  6. cognos 10.2.2 搭建网关做负载均衡

    最近要设计cognos服务器灾备模式,所以想到了cognos10自带的gateway负载均衡模式,搭建起来还是挺简洁的 设计背景: cognos主服务器:231 cognos灾备服务器:238 gat ...

  7. javascript函数 第14节

    <html> <head> <title>function</title> </head> <body> 1.函数形式<b ...

  8. （hdu）5547 Sudoku （4*4方格的 数独 深搜）

    Problem Description Yi Sima was one of the best counselors of Cao Cao. He likes to play a funny game ...

  9. VS2010修改默认配置路径

    视图->属性管理器 弹出如下截图:

  10. swift基本语法

    swift种语法着实怪异,实质干的事情还是一样的,一下将对此语法做简单介绍: 1.swift语法种已经剔除“:”这个结束符号,下面将演示入门操作的hello world import Foundati ...