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环境,就解决了。

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

相关推荐
ChoSeitaku1 天前
NO.2|proto3语法|消息类型|通讯录|文件读取|enum类型
java·服务器·前端
小J听不清1 天前
CSS 边框(border)全解析:样式 / 宽度 / 颜色 / 方向取值
前端·javascript·css·html·css3
用户255778850811 天前
axios全局重复请求取消
前端
前端付豪1 天前
实现一个用户可以有多个会话
前端·后端·llm
林古1 天前
我在 WSL 里控制 Windows Chrome 的一次实战复盘(OpenClaw)
前端
想不到一个好的ID1 天前
Claude Code 初学者必看指南
前端·后端
一枚菜鸟_1 天前
04-Flutter状态管理终极指南-Riverpod3.x从入门到精通
前端
一枚菜鸟_1 天前
06-Flutter动画从零到炫酷-让你的App动起来
前端
Wect1 天前
React Hooks 核心原理
前端·算法·typescript
shughui1 天前
Fiddler下载、安装、使用、汉化,详细图文教程(2026附安装包)
前端·测试工具·fiddler