canvas的drawImage使用跨域图片时候,会报错,解决方法如下:

1. 使用base64替换跨域图片

如果图片不大,且只有几张,可以使用base64,来代替跨域引用图片。

2. 设置image的crossOrigin属性,并且设置服务端的 Access-Control-Allow-Origin:* (或允许的域名)

var cvs = document.getElementById('canvas');
var ctx = example.getContext('2d');
var img = new Image();
//配合服务端的Access-Control-Allow-Origin
img.crossOrigin = '';
img.onload = function(){
ctx.drawImage(img,0,0,cvs.width,cvs.height);
var imgData = ctx.getImageData(100, 100, 1, 1);
};
img.src = "test.png";

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

  1. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  2. Canvas引入跨域的图片导致toDataURL()报错的问题的解决

    本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...

  3. Access to Image at 'file:///Users canvas本地图片跨域报错解决方案

    1.设置跨域 添加跨域条件   crossorigin="anonymous" 前提是后端支持这个图片跨域 2.上面加了之后还是报错 如标题所示 你需要把你的项目放到服务器上面跑 ...

  4. html2canvas - 解决办法之图片跨域导致的截图空白

    1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为 Access-Control-Allow-Origin:  * 2. 前端配置 var opts = { scale ...

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

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

  6. 关于微信小程序使用canvas生成图片,内容图片跨域的问题

    最近有个项目是保存为名片(图片),让用户发送给朋友或朋友圈,找了很多方案都不适用,绞尽脑汁之后还是选了使用canvas,但是用这玩意儿生成图片最大的缺点就是,如果你的内容中有图片,并且这个图片是通过外 ...

  7. canvas 使用图片跨域问题

    项目中需要生成海报,使用了前端生成图片的插件,将背景图,详情图,以及部分的文字说明放在一块并且生成一张新的图片,大体看了一下源码是通过canvas来实现的,在本地的时候完全没有问题,提交到服务器之后就 ...

  8. 解决Canvas.toDataURL 图片跨域问题

    如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1. ...

  9. 解决html2canvas图片跨域合成失败的问题

    /** * 将图片转换为base64 * 解决html2canvas跨域合成失败的问题 */ var getBase64Image = function(src, cb) { var img = do ...

随机推荐

  1. convert命令

    可以修改图片的分辨率 convert -resize 600×600 src.jpg dst.jpg src.jpg是你要修改的图片的名字 dst.jpg是新生成的图片名字

  2. Java中ArrayList的对象引用问题

    前言事件起因是由于同事使用ArrayList的带参构造方法进行ArrayList对象复制,修改新的ArrayList对象中的元素(对象)的成员变量时也会修改原ArrayList中的元素(对象)的成员变 ...

  3. 图片url转base64

    var xhr = new XMLHttpRequest() // 配置的代理,解决跨域问题 xhr.open('GET', url.replace('http://xxx.com', '/img') ...

  4. JS - Array.slice 与 Array.splice

    1)Array.slice方法   1.1)接收两个参数:              a:起始下标              b:结束下标   1.2)返回由a(包括)至b(不包括)的元素所组成的数组 ...

  5. Oracle 数据库密码过期问题

    (1)在CMD命令窗口中输入:           sqlplus 用户名/密码@数据库本地服务名 as sysdba;(如:sqlplus scott/1234@oracle1 as sysdba; ...

  6. 分数调查 HihoCoder - 1515

    小Hi的学校总共有N名学生,编号1-N.学校刚刚进行了一场全校的古诗文水平测验. 学校没有公布测验的成绩,所以小Hi只能得到一些小道消息,例如X号同学的分数比Y号同学的分数高S分. 小Hi想知道利用这 ...

  7. 从头开始学习数据库及ADO.NET——竹子整理

    目前为止,学习编程一年有余,写过管理系统,写过商城,写过桌面,接触的多了,乱七八糟的点太多,一堆前段框架,后台类库,纷纷杂杂,更新迭代之快也是令人咋舌.于是我就在想,作为一名程序员,哪些内容是实打实的 ...

  8. Eclipse主题更换方法

    1.打开Eclipse的Help->Eclipse Marketplace 2.在Find里搜索Eclipse Color Theme,点击Install按钮 3.打开Window->Pr ...

  9. Git的安装及常用操作

    一.Git的安装 1.下载Git,官网地址为:https://git-scm.com/downloads.     2.下载完成之后,双击目录进行安装 3.选择安装目录 4.选择组件,默认即可 5.设 ...

  10. np.newaxis()用法

    这个是liaspace函数 这个是np.newaxis的用法,增加维度,写一个表示增加一维,两个表示增加2维2位置的:号是对a的取值范围,如果把np.newaxis作为第一个参数是对行增加维度,作为第 ...