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

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

相关推荐
ALONE阿龙太原微码2 分钟前
微信小程序包体积优化:2MB 到 400KB 的实操记录
前端
掘金挖土3 分钟前
前端手摸手跑路之 AI 应用开发(十一)
前端·后端
创了么OPC5 分钟前
小程序能收款了,对公户还没开?独立开发者的交付闭环踩坑②
前端·微信小程序
IT_陈寒6 分钟前
Vue动态组件缓存的坑你踩过了吗?
前端·人工智能·后端
szp200511 分钟前
Cache API 会丢掉 URL 里的 #:我的 9 个模型分块一直写在同一条缓存上
javascript·浏览器
寂寞狼牙冷19 分钟前
封装fetch替换axios
前端
用户4611696572835 分钟前
网站 HTTPS 不稳定?证书排查指南
前端
n87651 小时前
Playwright Java WEB UI 自动化实现框架与逻辑
java·前端·ui
keyipatience1 小时前
TypeScript学习(1)
前端·javascript·学习·typescript·html·css3
xifangge20251 小时前
基于 JavaScript 实现 CNC 数控切削参数与螺纹公差纯前端核算引擎
开发语言·前端·javascript