关于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. 浅析Vue响应式原理(三)

    Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...

  2. golang之常量

    1.  常量可以是全局常量,也可以是函数内部的局部常量.常量的值不可修改,常量表达式的值在编译期计算,而不是在运行期.存储在常量中的数据类型只可以是布尔型.数字型(整数型.浮点型和复数)和字符串型.当 ...

  3. JavaScript--事件委托--冒泡

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. nodeJs学习-19 个人博客案例-(1)数据字典

    智能社视频27.28 数据字典: 定义: url 300字 admin_table 管理员用户表 ID username varchar(32) password varchar(32) banner ...

  5. SiteMesh:一个优于Apache Tiles的Web页面布局、装饰框架

    一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...

  6. 【NS2】新协议的添加示例(转载)

    1. 下表显示了 NS2 和 TCP/IP.OSI七层网络结构的大致对应关系(这个表很有好处哦) TCP       NS2     OSI     应用层     应用层    应用层 表示层 会话 ...

  7. 冒泡排序 Day07

    package com.sxt.arraytest2; /* * 冒泡排序 * 思想:两两交换 一路大的向右 */ import java.util.Arrays; public class Bubb ...

  8. C#判断文件是否被混淆

    可以使用混淆工具对一个DLL 和 exe 进行混淆. 但是如何知道一个文件是否已经混淆了. 在发布之前,需要知道是不是有文件忘了混淆. 要判断文件是否混淆,必须知道常用的混淆手法. 混淆就是因为编写的 ...

  9. 基于 springMVC 的 RESTful HTTP API 实践(服务端)

    理解 REST REST(Representational State Transfer),中文翻译叫"表述性状态转移".是 Roy Thomas Fielding 在他2000年 ...

  10. Laravel如何引用第三方(自定义)库

    想做一个网页抓取的功能,底层使用php的laravel框架. 这里使用phpQuery库来实现网页抓取,这里不做介绍. 需要了解的可以百度,或者等我填坑. 下载最新版本可以前往https://code ...