问题描述

当用户点击分享按钮时，生成一张海报，可以保存图片分享到朋友圈，用户的图片是存储在阿里云的OSS,当海报完成后，执行.canvas.toDataURL("image/png")时，出现index.html:28 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported的错误提示，这句话的翻译是uncaught domexception:未能对“htmlcanvaselement”执行“todataurl”：无法导出受污染的画布。因为图片跨域了，对画布造成了污染。

解决方法

搜索相关问题，大多是为img设置crossOrigin属性，实现图片允许跨域，即：img.setAttribute("crossOrigin",'Anonymous')，我为图片添加这个属性后，图片无法显示了，报了一个错误:  Access to image at 'https://claystar.oss-cn-shenzhen.aliyuncs.com/pic/9dd6d55c5c7334d9448c4628e6ff69f6.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

通过和同事沟通讨论得知，只需要为图片添加一个时间戳即可。最后解决方式：

img.src='http://www.xxxx.png' + '?time=' + new Date()

解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...的更多相关文章

  1. 解决 canvas 将图片转为base64报错

    var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d&q ...

  2. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  3. wordpress 点击文章图片 不能编辑（chrome下面） wordpress Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.

    说明:在chrome下面,编辑文章插入的图片,点击到图片上面,没有菜单显示. 报错: tinymce.min.js:10 Uncaught DOMException: Failed to execut ...

  4. 使用wpaint绘图软件时：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

    使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Th ...

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

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

  6. Swagger请求报错：TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

    TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. 如下图 ...

  7. 【报错解决】Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

    项目开发日记-bug多多篇(2) 同时也是 实现一些功能(3) 真的痛苦,写一天代码遇到的bug够我写三天博客. 今天是为了做一个头像功能,具体说是用户上传头像文件并且预览的功能. <div c ...

  8. Base64 报错 的解决办法 （Base-64 字符数组或字符串的长度无效。， 输入的不是有效的 Base-64 字符串，因为它包含非 Base-64 字符、两个以上的填充字符，或者填充字符间包含非法字符。）

    Base64 报错 的解决办法, 报错如下:1. FormatException: The input is not a valid Base-64 string as it contains a n ...

  9. 两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错

    遇到了两个由于php.ini配置错误导致的报错:ajax图片上传报错和exec报错 首先第一个: 在做一个用ajax图片上传的功能中,php报了这样一个错误:File upload error - u ...

随机推荐

  1. java反射原理，应用

    java类的加载过程 调用java命令运行程序时,该命令会启动一条java虚拟机进程,该程序的所有线程都会运行在这个虚拟机进程里面.程序运行产生的线程.变量都处于这个进程,共同使用该JVM进程的内存区 ...

  2. YUM简单入门

    1.制作YUM源先关闭相关安全设置,安装vsftpd [root@rhel7 ~]# firewall-cmd --set-default-zone=trusted 设置防火墙受信 [root@rhe ...

  3. C++解决最基本的迷宫问题

    问题描述:给定一个最基本的迷宫图,用一个数组表示,值0表示有路,1表示有障碍物,找一条,从矩阵的左上角,到右下角的最短路.求最短路,大家最先想到的可能是用BFS求,本文也是BFS求最短路的. 源代码如 ...

  4. 操作DOM会影响WEB应用的性能

    平时在工作中,要优化自己开发的WEB应用的性能,一般是遵循以下几个原则: 1.减少网络请求. 2.压缩.合并静态资源文件,以此来减轻网络传输的带宽压力和资源消耗. 3.代码逻辑层面上的性能优化.比如减 ...

  5. Kylin配置Spark并构建Cube

    HDP版本:2.6.4.0 Kylin版本:2.5.1 机器:三台 CentOS-7,8G 内存 Kylin 的计算引擎除了 MapReduce ,还有速度更快的 Spark ,本文就以 Kylin ...

  6. smartbits国产版本minismb – windows 10 用户界面无法正常显示

    Minismb测试仪表是复刻smartbits的国产版本,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数和 ...

  7. Scrapy项目 - 源码工程 - 实现豆瓣 Top250 电影信息爬取的爬虫设计

    一.项目目录结构 spiders文件夹内包含doubanSpider.py文件,对于项目的构建以及结构逻辑,详见环境搭建篇. 二.项目源码 1.doubanSpider.py # -*- coding ...

  8. Janus安装教程，ubuntu18.04系统

    Janus安装教程,ubuntu18.04系统     本文介绍Jansu如何安装,操作系统为Ubuntu 18.04.    (1)安装git 执行命令:“sudo apt-get install ...

  9. ZK 网络故障应对法

    网络故障可以说是分布式系统天生的宿敌.如果永远不发生网络故障,我们实际上可以设计出高可用强一致的分布式系统.可惜的是不发生网络故障的分布式环境还不存在,ZK 使用过程中也需要小心的应付网络故障. 让我 ...

  10. 如何把安全证书导入到java中的cacerts证书库

    每一步:进入某个https://www.xxx.com开头的网站,把要导入的证书下载, 在该网页上右键 >> 属性 >> 点击"证书" >> 再 ...