科普文章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. overflow: hidden用法，不仅仅是隐藏溢出

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html ...

  2. Struts---- <s:bean>标签

    近几天学习的都是跟struts有关的.详细写<s:bean>标签 具体内容为: 一.准备工作 1.新建Web工程 2.添加struts:右键点击工程名选择My Eclipse-->点 ...

  3. Spring对Hibernate事务管理【转】

    在谈Spring事务管理之前我们想一下在我们不用Spring的时候,在Hibernate中我们是怎么进行数据操作的.在Hibernate中我们每次进行一个操作的的时候我们都是要先开启事务,然后进行数据 ...

  4. react 资源汇总

    前端变化虽快,但其实一直都围绕这几个概念在转: URL - 访问什么页面 Data - 显示什么信息 View - 页面长成什么样 Action - 对页面做了什么操作 API Server - Da ...

  5. jQuery 基础

    慕课网 2016-01-07 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"&g ...

  6. ACM——A + B Problem (4)

    A + B Problem (4) 时间限制(普通/Java):1000MS/3000MS          运行内存限制:65536KByte总提交:2496            测试通过:124 ...

  7. c语言学习之基础知识点介绍（十七）：写入读取结构体、数组、结构体数组

    一.结构体的写入和读取 //写入结构体 FILE *fp = fopen("/Users/ios/Desktop/1.data", "w"); if (fp) ...

  8. ubuntu14.04下安装Naigos和pnp4nagios

    Nagios是一个监视系统运行状态和网络信息的监视系统.Nagios能监视所指定的本地或远程主机以及服务,同时提供异常通知功能等. 安装环境:ubuntu14.04,全是最新的nagios和nagio ...

  9. javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  10. 02_Jquery_04_属性选择器

    [简述] [index.jsp] <%@ page language="java" import="java.util.*" pageEncoding=& ...