问题描述

当用户点击分享按钮时，生成一张海报，可以保存图片分享到朋友圈，用户的图片是存储在阿里云的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. Docker下kafka学习三部曲之一：极速体验kafka

    Kafka是一种高吞吐量的分布式发布订阅消息系统,从本章开始我们先极速体验,再实战docker下搭建kafka环境,最后开发一个java web应用来体验kafka服务. 我们一起用最快的速度体验ka ...

  2. 网络基础 ----------- 电脑作为wifi站点

    在上大学的时候最难受的就是,没有无线,但是电脑有宽带,那么怎么将电脑变成路由器哪 1.首先查看你的无线网卡是否支持开无线 通过命令win + R 快捷件进入命令窗口输入 : . netsh wlan ...

  3. 用OSS给阿里云ECS扩展硬盘容量

    阿里云的虚拟机ECS在创建时可以指定一个云盘,但在使用过程中,随着时间推移数据越来越多,难免硬盘就不够用了.当然你可以在另外加个云盘,不过总还有用完的时候,而且价格也不便宜.今天给大家介绍一个方法,给 ...

  4. win7右下角声音图标不见了

    场景:开机后发生右下角的声音图标不见了,马上google,可能性有两种图标隐藏或者系统错误 隐藏处理方式:右下角下打开自定义--> 将它调为显示和通知(发生不好使,估计是系统错误) 系统错误处理 ...

  5. Java-HashSet集合中的几种遍历方式

    //我们先创建一个set集合 public static void main(String[] args) { Set<Integer> sets = new HashSet<> ...

  6. TensorFlow2.0（1）：基本数据结构—张量

    1 引言 TensorFlow2.0版本已经发布,虽然不是正式版,但预览版都发布了,正式版还会远吗?相比于1.X,2.0版的TensorFlow修改的不是一点半点,这些修改极大的弥补了1.X版本的反人 ...

  7. Qt线程实现分析-moveToThread vs 继承

    最近抽空研究了下QThread,使用起来方式多种多样,但是在使用的同时,我们也应该去了解Qt的线程它到底是怎么玩儿的. Qt的帮助文档里讲述了2种QThread的使用方式,一种是moveToThrea ...

  8. Oracle内置函数之数值型函数

    think different

  9. 给Xshell增加快速命令集

    一.显示快速命令栏 二.配置快速命令集 在工具中找到快速命令集 添加快速命令集 三.使用快速命令集

  10. JavaScript之深入对象（一）

    在之前的<JavaScript对象基础>中,我们大概了解了对象的创建和使用,知道对象可以使用构造函数和字面量方式创建.那么今天,我们就一起来深入了解一下JavaScript中的构造函数以及 ...