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. kubernetes-配置管理(十一)

    Secret https://kubernetes.io/docs/concepts/configuration/secret/ Secret解决了密码.token.密钥等敏感数据的配置问题,而不需要 ...

  2. sql注入问题 java中将MySQL的数据库验证秘密加上 ' or '1'= '1 就可以出现万能密码

    password的字符串中,加上 ' or '1'= '1 就可以制作出万能密码. 原因如下: 原代码中密码是123456 执行数据库查询语句 实际上执行的SQL语句是: select * from ...

  3. XML格式与实体类的转换

    背景 本人头一回写博客,请大家多多关照.通过读取XML文件获取用户管理权限,其中涉及三部分: 1.XML文件的生成: 2.XML文件的读取: 3.XML文件的保存: 如何做 第一步:自己先将XML文件 ...

  4. webpack 4.x 解决 webpack-dev-server工具在webpack构建的项目中使用问题

    webpack-dev-server工具能实现自动打包编译和热更新 首先将webpack-dev-server安装到项目中 npm install webpack-dev-server -D 这时在命 ...

  5. let和const在es6中的异同点

    let和const这两个都是声明一个变量或函数的方法与var差不太多的效果 let的声明在for循环中,当你定义的是多少,最后你的值就是多少开始的,它只进行一次循环,不会像var那样去一遍一遍的去遍历 ...

  6. 51nod——1285 山峰和分段(暴力出奇迹)

    要求每段的点数都一样,因此分的段数cnt肯定是n的因子,要求每段都有山峰,因此cnt肯定小于等于山峰数量.分段的宽度d=n/cnt,对山峰数量做一个前缀和,检查一下每一段的山峰数量是否没有增加即可. ...

  7. 牛客小白月赛1 G あなたの蛙は旅⽴っています【图存储】【DP】

    题目链接:https://www.nowcoder.com/acm/contest/85/G 思路: DP 空间可以优化成一维的, 用一维数组的 0 号单元保存左斜对角的值即可. 存图这里真不好理解 ...

  8. 1025: [SCOI2009]游戏

    Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2727  Solved: 1794[Submit][Status][Discuss] Descripti ...

  9. cf492E. Vanya and Field(扩展欧几里得)

    题意 $n \times n$的网格,有$m$个苹果树,选择一个点出发,每次增加一个偏移量$(dx, dy)$,最大化经过的苹果树的数量 Sol 上面那个互素一开始没看见,然后就GG了 很显然,若$n ...

  10. pycharm永久激活记录

    由于上一年安装的pycharm激活时是用的激活码,有期限的,一直到今年5月4日过期,这两天顺便把版本也更新到最新,一直用的free版,到今天提醒我free快到期了,所以才狠下心来去找解决方案,目前已经 ...