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 小时前
Rust+Slint 实现温度计源码分享
前端·rust·slint
计算机魔术师13 小时前
面壁智能 OpenBMB 推出 MathForm,面向 Lean 4 数学自动形式化的开源框架、数据集与模型
前端
NeilCarmack14 小时前
Deepseek-harness增加桌面版端序列:第 2 讲 · spawn Electron:当前进程如何“交棒“
前端·javascript·electron
上海魁鲸科技有限公司14 小时前
APS高级排产系统到底有什么用?一文讲清功能、选型与落地建议
前端·microsoft·excel
陈随易14 小时前
Bun v1.4 更新总结:把浏览器、图片、定时任务和工程工具都装进一个运行时
前端·后端·程序员
东风破_16 小时前
TypeScript 高级类型进阶:keyof、Exclude、Record 与类型组合思想
前端·后端·typescript
DS随心转插件16 小时前
Grok生成的html怎么导出——AI导出鸭:大模型结构化输出的“最后一公里”工程化解构
前端·人工智能·ai·html·豆包·deepseek·ai导出鸭
এ慕ོ冬℘゜17 小时前
使用 jQuery 动态渲染表格与状态切换
前端·javascript·jquery
人间凡尔赛17 小时前
2026 前端必修:4 个让 CSS 脱胎换骨的现代新特性(附实战代码)
前端·css
猿究院--Cu-Sn合金17 小时前
Agent 交假前端、交没测过的接口:Webproof 规定没点过、没红过就不算完成
前端