关于canvas.toDataURL 由于跨域报错的解决方法

用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它。但有一个问题,就是图片源不能跨域,不然会报错:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

解决方法,相信大家都知道了,就是在图片img加上crossOrigin属性,赋值为Anonymous。但还有一个关键的地方,就是设置crossOrigin要在设置src地址之后,否则是没有效果的:


var img = new Image();
img.src = '.....'; //顺序不能错
img.setAttribute("crossOrigin",'Anonymous');

canvas.toDataURL 由于跨域报错的解决方法的更多相关文章

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

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

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

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

  3. ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法

    原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebServi ...

  4. 网站eurl.axd报错的解决方法

    网站eurl.axd报错的解决方法 错误发生的原因是当ASP.NET检测到Web站点配置为使用ASP.NET 4.0,本地ASP.NET 4.0 的组件会传递一个不能扩展的 URL到ASP.NET的管 ...

  5. MySQL中遇到的几种报错及其解决方法

    MySQL中遇到的几种报错及其解决方法 1.[Err] 1064 - You have an error in your SQL syntax; check the manual that corre ...

  6. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  7. Vue 项目在其他电脑 npm run dev 运行报错的解决方法

    一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法.   报错原因 ...

  8. 如何自定义JSTL标签与SpringMVC 标签的属性中套JSTL标签报错的解决方法

    如何自定义JSTL标签 1.创建一个类,从SimpleTagSupport继承 A) 通过继承可以获得当前JSP页面上的对象,如JspContext I) 实际上可以强转为PageContext II ...

  9. windows下使用GNU make命令报错的解决方法

    windows下使用GNU make命令报错的解决方法=> 错误信息:make: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x ...

随机推荐

  1. JSP Web第八章整理复习 过滤器

    P269  Filter过滤器的基本原理 P269  Filter过滤器体系结构 原理和体系结构看懂了就行 P270 例8-1过滤器代码与配置文件 略

  2. [Android]Space控件的应用场景

    Space控件是在Android 4.0中加入,是个空白的view,一般用于填充View组件中的间隙. support-v4包里提供了兼容低版本的Space控件. 源码分析 Space控件源码非常简单 ...

  3. Ubuntu16.04安装Caffe最全最详细教程(CPU)

    转载请附上本文链接:https://www.cnblogs.com/acgoto/p/11570188.html 一.前言 为了安装caffe,本人已经在centos7.x上试错了1次,目前弃疗~:在 ...

  4. java时间还在用date和calender?换LocalDateTime吧!

    java在时间计算上一直为人所诟病,在社区强烈反应下,java8推出了线程安全.简易.高可靠的时间包.并且数据库中也支持LocalDateTime类型,所以在数据存储时候使时间变得简单. LocalD ...

  5. Directx11教程(46) alpha blend(3)

    原文:Directx11教程(46) alpha blend(3)       现在我们尝试改变box的贴图,使用一张带alpha的dds文件wirefence.dds, 用directx textu ...

  6. js简单倒计时

    不想每次用倒计时,都现写代码,比较烦,这里记一下,也顺便分享一些倒计时简单的逻辑. 如果你有更简单方便的代码,可以分享给大家. var method = { countdownObj: { timer ...

  7. linux服务器配置防火墙使用端口

    重启后生效方法: 1.开启: chkconfig iptables on 2.关闭: chkconfig iptables off  即时生效,重启后失效 : 1.开启: service iptabl ...

  8. 前端规范2-CSS规范

    CSS规范 缩进 使用Tab缩进(相当于四个空格) 选择器与{之间必须包含空格,参1 属性名和之后的:不允许包含空格,:与属性值之间必须包含空格.      例 列表性属性值在单行时,后必须跟一个空格 ...

  9. nginx设置301永久重定向

    https://blog.csdn.net/wzqzhq/article/details/53376501 比如说我的域名有多个,一个主域名www.zq110.com,多个次域名:www.aaa.co ...

  10. 【批量添加】-拼接sql字符串 标签: 批量添加 2015-12-13 17:49 2070人阅读 评论(33)

    现在做的一个项目需要用到批量添加,但是封装的底层没有这个方法,所以自食其力,自己来写.我们用的是拼接sql字符串的方法来实现功能. 具体实现流程:首先将需要的数据存储到实体的list中,然后将这个li ...