问题描述

当用户点击分享按钮时，生成一张海报，可以保存图片分享到朋友圈，用户的图片是存储在阿里云的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. SpringCloud超简单的入门(1)--一些简单的介绍

    简介 简单来说,springcloud的就是由一组springboot应用(服务)组成,相互之间通过REST等方式进行通信. 两个springboot应用,其中一个作为服务提供者,一个作为服务消费者, ...

  2. Java第二次作业第一题

    编写图形界面程序,在窗体中设置菜单栏,在菜单栏上添加"file"菜单,在文件菜单中添加"new"和"quit"两个菜单项,其中"q ...

  3. 了解Java线程优先级，更要知道对应操作系统的优先级，不然会踩坑

    Java 多线程系列第 6 篇. 这篇我们来看看 Java 线程的优先级. Java 线程优先级 Thread 类中,使用如下属性来代表优先级. private int priority; 我们可以通 ...

  4. KeyValue对RDDs

    创建KeyValue对RDDs 使用函数map,返回keyvalue对 例如,包含数行数据的RDD,那每行的第一个单词作为keys. sparl.txt中的内容如下: hello ! hello wo ...

  5. Kerberoasting攻击

    前面我们介绍了<Windows本地认证>.<Windows网络认证>.<Windows域认证>和<SPN扫描>,这次继续讲解域内相关的东西. 0x01介 ...

  6. 12.Django基础十之Form和ModelForm组件

    一 Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户 ...

  7. 一个低级错误引发Netty编码解码中文异常

    前言 最近在调研Netty的使用,在编写编码解码模块的时候遇到了一个中文字符串编码和解码异常的情况,后来发现是笔者犯了个低级错误.这里做一个小小的回顾. 错误重现 在设计Netty的自定义协议的时候, ...

  8. Ceph 的 'MAX AVAIL' 和 数据平衡 - Storage 6

    1. 客户环境 节点数量:4个存储节点 OSD数量:每个节点10块8GB磁盘,总共 40 块OSD Ceph 版本: Storage 6 使用类型:  CephFS 文件 CephFS数据池:  EC ...

  9. C++ProtoBuf的安装与使用

    目录 安装(Ubuntu 16.04) 简介 proto2 proto3 用法 proto3 输出结果 总结 @(目录) 安装(Ubuntu 16.04) sudo apt-get install a ...

  10. 设计时数据源： 在ActiveReports中直接连接PostgreSql 数据库

    在之前的博客中,我们学习了如何在运行时绑定PostgreSql 数据库,今天我们学习,如何直连PostgreSQL 数据库. 1. 安装PostgreSQL 的ODBC驱动程序 https://www ...