问题描述

当用户点击分享按钮时，生成一张海报，可以保存图片分享到朋友圈，用户的图片是存储在阿里云的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. 20182324 实验一《Linux基础与Java开发环境》实验报告

    20182324 2019-2020-1 <数据结构与面向对象程序设计>实验1报告 课程:<程序设计与数据结构> 班级: 1823 姓名: 殷宇豪 学号: 20182324 实 ...

  2. JavaScrpt 介绍

    什么是 JavaScript? JavaScript 是一种直译式脚本语言,一种轻量级的脚本语言 什么是脚本语言? Script language指的是它不具备开发操作系统的能力,而是只用来编写控制其 ...

  3. .Ajax(async异步与sync同步)

    异步,不会阻碍代码的执行,它会等待所有的同步代码执行完毕后,再执行输出自己的同步结果.(原生js中,只有定时器,DOM,ajax三个东西是异步的.) 同步,代码只会从上到下依次执行,只要一步出错,接下 ...

  4. myeclipse 保存含中文的jsp失败，提示内容含有 ISO-8859-1 不支持的字符

    就是这货,网上说各种设置首选项编码神马的,但我只是临时学一学jsp,装的myeclipse貌似不全,没有他们说的选项,后来发现了解决方案: 出错是因为我的jsp文件是用于在其他jsp中引入的,所以没有 ...

  5. 大数据平台搭建 - cdh5.11.1 - oozie安装

    一.简介 oozie是hadoop平台开源的工作流调度引擎,用来管理hadoop作业,属于web应用程序,由oozie server 和oozie client构成. oozie server运行与t ...

  6. CentOS在VMware中的安装

    1.启动VMware 2.新建一台虚拟机,选择典型 3.选择稍后安装操作系统 4.选择引导系统为Linux,系统版本为Centos 5.选择安装位置 6.选择最大磁盘容量 7.点击自定义硬件,进行硬件 ...

  7. 写论文与PPT汇报时matlab图片的背景透明处理

    不少同学在使用Word写论文时,将matlab生成的图保存为jpg格式,然后粘贴到文档中.word背景为纯白色,jpg图的缺点没有显示,实际上会存在很大白边,以及放大后不清晰的问题,很影响PPT展示和 ...

  8. 提交第一个spark作业到集群运行

    写在前面 接触spark有一段时间了,但是一直都没有真正意义上的在集群上面跑自己编写的代码.今天在本地使用scala编写一个简单的WordCount程序.然后,打包提交到集群上面跑一下... 在本地使 ...

  9. Django REST Framework之权限组件

    权限控制是如何实现的? 一般来说,先有认证才有权限,也就是用户登录后才能判断其权限,未登录用户给他一个默认权限. Django接收到一个请求,首先经过权限的检查,如果通过检查,拥有访问的权限,则予以放 ...

  10. 10秒钟理解react生命周期

    慎点!这是一篇很水很水的文章, 抄自react中文文档, 本文详细介绍了react生命周期函数执行顺序, 以及各生命周期函数的含义和具体作用. 不同阶段生命周期函数执行顺序 挂载(Mounting) ...