canvas导出绘制图片canvas.toDataURL()报错

canvas绘制图片后,想导出图片,用canvas.toDataURL获取,发现打印不出数据,还报错。

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

at img.onload

代码:

// 可以将 canvas 的内容导出为图片

const dataURL = canvas.toDataURL('image/png');

一直想了很久,查资料,这代码也没有错啊。

最后让我找到答案。不是代码问题,是环境问题。

答案:这个问题因为是基于file:// 进行调试的,而chrome做了安全相关的处理,主要是HTML5安全的CORS(跨域资源共享)的安全限制,造成出现这样的提示,如果你需要在自己的电脑上调试的话,只需要本地搭建一个服务器环境就可以了。

前面我一直是本地进行的所以一直报错,现在我搬到PHP环境,就解决了。

效果图:可以打印出来图片了。

相关推荐
想起你的日子13 小时前
EFCore之Code First
前端·.netcore
框架图13 小时前
Html语法
前端·html
深耕AI13 小时前
【wordpress系列教程】07 网站迁移与备份
运维·服务器·前端·数据库
月空MoonSky13 小时前
解决使用Notepad++出现异型字或者繁体字体问题
java·javascript·notepad++
joan_8514 小时前
input禁止自动填充
前端·elementui·vue
研☆香14 小时前
简单的复选框 全选 反选功能
javascript
林间风雨14 小时前
layui 2.9.16 版本,根据字段字数最大数,表格自适应字段宽度
前端·javascript·layui
hzb6666614 小时前
xd_day47文件上传-day55xss
javascript·学习·安全·web安全·php
木子啊14 小时前
HTML防窥技巧:让源码难以偷窥
前端·html·查看源码·禁止查看源码