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. python读取图像

    from PIL import Imageimg = Image.open('/Users/NaCl/Desktop/test.png')img.show()

  2. PAT (Basic Level) Practise (中文)- 1002. 写出这个数 (20)

    http://www.patest.cn/contests/pat-b-practise/1002 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个 ...

  3. IBM MQ Explore使用

    一,版本说明: 系统:win10.MQ:V9.04 二.关于帮助文档: 1.读了差不多一大半,个人感觉说明的比较生僻,应该是直译过来的.但是还是可以从这里面学一下基本的操作. 2.对于一些基本的操作, ...

  4. 牛客小白月赛5 A 无关(relationship) 【容斥原理】【数据范围处理】

    题目链接:https://www.nowcoder.com/acm/contest/135/A 题目描述 若一个集合A内所有的元素都不是正整数N的因数,则称N与集合A无关.   给出一个含有k个元素的 ...

  5. k8s的ingress资源简述

    ingress controller是独立与controller-manager的Ingress的主要作用是可以利用nginx,haproxy,envoy,traefik等负载均衡器来暴露集群内部服务 ...

  6. jupyter notebook(二)——修改jupyter打开默认的工作目录

    1.简述 jupyter notebook,启动后,浏览器发现工作目录并不是自己真正的代码的工作路径.所以需要设置一下.这样方便自己快捷使用. 2.设置修改jupyter notebook打开后默认工 ...

  7. java util - MD5/AES/RSA快速调用工具

    测试代码 package cn.java.security; import java.security.Key; import java.util.Base64; import org.junit.A ...

  8. linux下mysql的权限设计总结

    1,进入mysql,终端中输入 mysql -u 用户名 -p   .enter键后,提示输入密码. 2,执行grant all privileges on xxxdb.* to usertest@& ...

  9. (转) Redis哨兵的详解

    1 哨兵的作用 哨兵是redis集群架构中非常重要的一个组件,主要功能如下: 1. 集群监控:负责监控redis master和slave进程是否正常工作 2. 消息通知:如果某个redis实例有故障 ...

  10. Contest - 中南大学第六届大学生程序设计竞赛(Semilive)

    题1:1160十进制-十六进制 注意他给的数据范围 2^31,int是 2^31-1 #include<iostream> using namespace std; int main() ...