关于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. JS 寄生 继承

    寄生构造函数 寄生构造函数的用途目的:给String内置对象功能扩充 稳妥的构造函数 继承 对象冒充继承 一般继承 组合继承 原型链继承:借助于中转函数和已有对象 寄生式继承:把原型式+工厂式结合而来 ...

  2. 【C++】关于map的遍历 删除

    int main(int argc, char* argv[]) { map<string, string> mapData; mapData["a"] = " ...

  3. 【uml】之类图中的关系 标签: uml图形类 2014-11-29 09:02 1198人阅读 评论(23)

    uml早就画完了图,但是自己迟迟没有总结,因为总觉的自己把握的不到位,虽然现在也还是不到位,废话少说,上篇博客总结了用例图中的几种关系,这篇就讨论一下类图中的几种关系. 在uml的所有图中,就我目前的 ...

  4. JQ取消hover事件

    $('a').unbind('mouseenter').unbind('mouseleave');

  5. 【NS2】添加mUDP、mUdpSink和mTcpSink模块

    根据柯老师的教材可知,mUDP是UDP的延伸,除了具有UDP的功能外,还能记录所发送的包的信息.mUdpSink可以把接收到的包的信息记录 到文件中.mTcpSink是TCPsink的延伸,除了具有T ...

  6. Docker镜像部分详解

    拉取镜像: docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签] Docker 镜像仓库地址:地址的格式一般是 [:端口号].默认地址是 Docke ...

  7. 2019-8-31-dotnet-core-输出调试信息到-DebugView-软件

    title author date CreateTime categories dotnet core 输出调试信息到 DebugView 软件 lindexi 2019-08-31 16:55:58 ...

  8. 64位Linux编译C代码,crt1.o文件格式不对的问题

    今天在某台64位LInux下编译一个简单的hello world的C程序,报错: /usr/lib/gcc/x86_64-redhat-linux/4.4.7/../../../crt1.o: cou ...

  9. Flask学习之五 用户登录

    英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-v-user-logins 中文翻译地址:http:// ...

  10. oracle函数 NLS_UPPER(x[,y])

    [功能]返回字符串并将字符串的转换为大写; [参数]x字符型表达式 [参数]Nls_param可选,指定排序的方式(nls_sort=) . SCHINESE_RADICAL_M(部首.笔画) SCH ...